ФреймворкJavaScript

Theme API: светлая, тёмная и автоматическая темы

Чтение и смена цветовой темы редактора на лету. Режим `'auto'` следует настройке ОС через prefers-color-scheme, поэтому итоговая тема может отличаться от заданного режима.

Редактировать на GitHub

Как получить экземпляр редактора

Методы ниже вызываются на редакторе, созданном через new Blok(). Они доступны после того, как разрешится editor.isReady.

TypeScript

// 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');

Методы

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.

Когда использовать

Возвращает заданный режим — 'auto', 'light' или 'dark', — а не то, что отображается сейчас. Для этого есть getResolved().

TypeScript

console.log(editor.theme.get()); // 'auto'

theme.set(mode)

void

Set the theme mode. Pass 'light' or 'dark' to pin it, or 'auto' to follow the OS preference via prefers-color-scheme.

Когда использовать

Меняет тему на месте: без пересоздания редактора и без перерисовки содержимого блоков.

TypeScript

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.

Когда использовать

Возвращает 'light' или 'dark' с учётом настройки ОС, чтобы интерфейс вокруг редактора мог совпадать с ним.

TypeScript

editor.theme.set('auto');
console.log(editor.theme.getResolved()); // 'dark' on a dark-mode OS