Theming

import { configureEditorEnvironment, createEditorState, mountEditor, type ColorScheme } from "@openmarkdown-dev/editor";

// Start from the system setting; the button overrides it for this page.
const system = matchMedia("(prefers-color-scheme: dark)");
let scheme: ColorScheme = system.matches ? "dark" : "light";
const listeners = new Set<(s: ColorScheme) => void>();
const set = (next: ColorScheme) => {
  scheme = next;
  listeners.forEach((cb) => cb(next));
};
system.addEventListener("change", () => set(system.matches ? "dark" : "light"));

configureEditorEnvironment({
  colorScheme: {
    current: () => scheme,
    subscribe(cb) {
      listeners.add(cb);
      return () => listeners.delete(cb);
    },
  },
});

mountEditor(
  document.getElementById("editor")!,
  createEditorState({
    doc: "# A serif editor\n\nThe font, the [link colour](https://openmarkdown.dev) and the corners come from `--ome-*` tokens.\n\n> [!TIP]\n> Light and dark each have their own defaults. The button switches between them.\n",
  }),
);

const button = document.getElementById("scheme")!;
const label = () => (button.textContent = scheme === "dark" ? "Light" : "Dark");
listeners.add(label);
label();
button.addEventListener("click", () => set(scheme === "dark" ? "light" : "dark"));

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>OpenMarkdown editor: theming</title>
    <style>
      #scheme { margin-bottom: 10px; font: 14px system-ui, sans-serif; }
      #editor { height: 340px; border: 1px solid #d9d6cf; border-radius: 8px; overflow: hidden; }
      #editor .cm-editor { height: 100%; }
      /* Restyle through the --ome-* tokens, set on .cm-editor. */
      #editor .cm-editor {
        --ome-accent: #7c3aed;
        --ome-font: Georgia, "Times New Roman", serif;
        --ome-radius: 10px;
      }
    </style>
  </head>
  <body>
    <button id="scheme" type="button">Dark</button>
    <div id="editor"></div>
    <script type="module" src="./main.ts"></script>
  </body>
</html>

{
  "name": "openmarkdown-editor-example-theming",
  "private": true,
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "@openmarkdown-dev/editor": "0.1.0"
  },
  "devDependencies": {
    "typescript": "~5.8.3",
    "vite": "^7.0.4"
  }
}