Examples › Track 3 — Editor › Example 12

Runtime theme switching

Click a theme button — the editor updates instantly via editor.setTheme(). In auto mode, the editor honors your OS color-scheme preference and re-applies whenever the system flips light/dark.

Live demo

Current: auto

The code

const editor = new QuikdownEditor('#editor', {
  mode: 'split',
  theme: 'auto',   // ← initial theme
});

// Switch at runtime
editor.setTheme('dark');
editor.setTheme('light');
editor.setTheme('auto');     // honors system preference

// Read current setting
const t = editor.getTheme(); // 'auto' | 'light' | 'dark'

How auto mode works

In auto mode the editor calls window.matchMedia('(prefers-color-scheme: dark)'), applies the matching theme, and listens for changes. If the user (or their OS) flips the system theme, the editor flips too — without requiring a page reload or another setTheme() call.

When you call setTheme('light') or setTheme('dark'), the auto-mode listener is torn down so the editor stays at the explicit choice until you call setTheme('auto') again.