# 主題與樣式

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

## 模式決定

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

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

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

## changeMode()

```javascript
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`，需要分別呼叫。要跟隨系統切換，可自行監聽：

```javascript
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` 等 | 提示框，見 [標題、分隔線與引用](/syntax-blocks) |
| `.pd-md-viewer a.tag` | hashtag 連結 |
| `.pd-md-viewer section.more` | YouTube／Vimeo 預覽卡 |

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