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. It fires with the resolved theme when the theme 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. It is 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. There is 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 actually being painted. When the mode is 'auto', it is the theme left after evaluating the OS preference. Use it to match surrounding UI to the editor.
When to use
Returns 'light' or 'dark' after evaluating the OS preference, so the host UI around the editor can match it.
editor.theme.set('auto');
console.log(editor.theme.getResolved()); // 'dark' on a dark-mode OS