主題與樣式

本頁說明深淺色模式如何決定、changeMode() 的實際效果，以及可用來覆寫樣式的 class 與 data 屬性。

模式決定

style.mode 在建構時轉小寫後判斷：

`style.mode`	系統偏好深色	寫入 `data-mode`
`"dark"`	任一	`"dark"`
`"auto"`（預設）、空字串	是	`"dark"`
`"auto"`（預設）、空字串	否	`""`
`"light"` 或其他值	任一	`""`

系統偏好取自 bundle 載入時的 matchMedia("(prefers-color-scheme: dark)") 一次性結果。頁面開著時使用者切換系統主題，NanoMD 不會跟著改變。

changeMode()

editor.changeMode("dark");
viewer.changeMode("dark");

changeMode(mode = "light") 直接把參數寫進 data-mode，不做判斷：

呼叫	結果
`changeMode("dark")`	深色
`changeMode()`、`changeMode("light")`	`data-mode="light"`，CSS 只認 `"dark"`，呈現淺色
`changeMode("auto")`	`data-mode="auto"`，呈現淺色，不會重新偵測系統偏好

編輯器與預覽器各自維護 data-mode，需要分別呼叫。要跟隨系統切換，可自行監聽：

matchMedia("(prefers-color-scheme: dark)").addEventListener("change", (e) => {
    const mode = e.matches ? "dark" : "light";
    editor.changeMode(mode);
    viewer.changeMode(mode);
});

樣式檔

檔案	用途
`NanoMD.css`	編輯器與預覽器樣式；bundle 載入時自動從 jsDelivr 插入固定 1.11.6 版
`NanoMD-output.css`	`download("html")` 匯出檔引用的獨立樣式

自動插入的是 CDN 上固定版本的 NanoMD.css，即使使用本地 dist/NanoMD.js；要改用本地樣式，需在其後載入自己的 stylesheet 覆寫。

可覆寫的選擇器

選擇器	套用對象
`.pd-md-editor`、`.pd-md-viewer`	容器
`[data-mode="dark"]`	深色模式
`[data-fill="1"]`	絕對定位填滿父元素
`.pd-md-editor[data-row="1"]`	顯示行號
`.pd-md-editor[data-wrap="0"]`	不自動換行
`.pd-md-editor[data-pin="1"]`	工具列固定顯示
`.pd-md-editor > div[data-focus="1"]`	游標所在列
`[data-saved="0"]`／`[data-saved="1"]`	內容尚未／已同步至預覽
`.pd-md-viewer blockquote.NOTE` 等	提示框，見標題、分隔線與引用
`.pd-md-viewer a.tag`	hashtag 連結
`.pd-md-viewer section.more`	YouTube／Vimeo 預覽卡

焦點列與提示文字的顏色、字型由建構選項以 <style> 插入，也可用更高權重的選擇器覆寫，見編輯器選項。