# Theming

This page explains how light and dark mode is decided, what `changeMode()` actually does, and which classes and data attributes you can target to override styles.

## How the Mode Is Decided

`style.mode` is lowercased and checked at construction:

| `style.mode` | System prefers dark | `data-mode` written |
|---|---|---|
| `"dark"` | Either | `"dark"` |
| `"auto"` (default), empty string | Yes | `"dark"` |
| `"auto"` (default), empty string | No | `""` |
| `"light"` or anything else | Either | `""` |

The system preference is a one-time read of `matchMedia("(prefers-color-scheme: dark)")` when the bundle loads. If the user switches the OS theme while the page is open, NanoMD does not follow.

## changeMode()

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

`changeMode(mode = "light")` writes its argument straight into `data-mode` without any checks:

| Call | Result |
|---|---|
| `changeMode("dark")` | Dark |
| `changeMode()`, `changeMode("light")` | `data-mode="light"`; the CSS only recognizes `"dark"`, so it renders light |
| `changeMode("auto")` | `data-mode="auto"`; renders light and does not re-detect the system preference |

The editor and the viewer each keep their own `data-mode`, so call both. To follow the system theme, listen yourself:

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

## Stylesheets

| File | Purpose |
|---|---|
| `NanoMD.css` | Editor and viewer styles; the bundle inserts version 1.11.6 from jsDelivr automatically on load |
| `NanoMD-output.css` | Standalone styles referenced by files exported with `download("html")` |

The auto-inserted stylesheet is the pinned CDN `NanoMD.css`, even when you load a local `dist/NanoMD.js`; to use local styles, load your own stylesheet after it and override.

## Selectors to Override

| Selector | Applies to |
|---|---|
| `.pd-md-editor`, `.pd-md-viewer` | Containers |
| `[data-mode="dark"]` | Dark mode |
| `[data-fill="1"]` | Absolutely positioned to fill the parent |
| `.pd-md-editor[data-row="1"]` | Line numbers shown |
| `.pd-md-editor[data-wrap="0"]` | Word wrap off |
| `.pd-md-editor[data-pin="1"]` | Toolbar pinned |
| `.pd-md-editor > div[data-focus="1"]` | Row holding the caret |
| `[data-saved="0"]` / `[data-saved="1"]` | Content not yet / already synced to the preview |
| `.pd-md-viewer blockquote.NOTE`, ... | Alerts; see [Headings, Rules and Blockquotes](/syntax-blocks) |
| `.pd-md-viewer a.tag` | Hashtag links |
| `.pd-md-viewer section.more` | YouTube/Vimeo preview cards |

The focus-row and placeholder colors and the font are inserted as `<style>` from the constructor options; selectors with higher specificity can override them too. See [Editor Options](/editor-options).