Documentation 1.11.6
Home GitHub

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()

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:

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
.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.

中文