Theme API: switch light, dark, and auto
Read and switch the editor color theme at runtime. The configured mode and the theme actually painted are two different questions — `get()` answers the first, `getResolved()` the second. To be notified instead of polling, pass the core config option `onThemeChange`, which fires with the resolved theme when it changes (including OS-preference flips while the mode is 'auto').
Reaching the editor instance
The methods below run on the editor you created with new Blok(). They are available once editor.isReady resolves.
// You already hold the instance returned by the constructor.
const editor = new Blok({ holder: 'editor' });
await editor.isReady;
// Call any API method on it.
editor.caret.setToLastBlock('end');Methods
theme.get()
'light' | 'dark' | 'auto'The configured theme mode — exactly what was passed as `config.theme` or last set via `theme.set()`. Returns 'auto' when the editor follows the OS preference, so this is not the theme currently painted.
When to use
Returns the configured mode — 'auto', 'light' or 'dark' — not what is currently painted. Use getResolved() for that.
console.log(editor.theme.get()); // 'auto'theme.set(mode)
voidSet the theme mode. Pass 'light' or 'dark' to pin it, or 'auto' to follow the OS preference via prefers-color-scheme.
When to use
Switches the theme in place; no editor recreation and no re-render of block content.
editor.theme.set('dark');
// Back to following the OS
editor.theme.set('auto');theme.getResolved()
'light' | 'dark'The theme after evaluating the OS preference when the mode is 'auto' — the theme actually being painted. Use it to match surrounding UI to the editor.
When to use
Returns 'light' or 'dark' after evaluating the OS preference, so host chrome around the editor can match it.
editor.theme.set('auto');
console.log(editor.theme.getResolved()); // 'dark' on a dark-mode OS