Theme API: switch light, dark, and auto
Read and change the editor's color theme at runtime. `'auto'` follows the OS preference via prefers-color-scheme, so the resolved theme can differ from the mode you set.
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