ФреймворкJavaScript

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

Чтение и смена цветовой темы редактора на лету. Заданный режим и реально отрисованная тема отвечают на разные вопросы. get() отвечает на первый, getResolved() на второй.

Чтобы получать уведомления вместо опроса, передайте опцию конфигурации ядра onThemeChange. Она срабатывает с разрешённой темой при её изменении, включая смену системной настройки, пока режим равен 'auto'.

Редактировать на 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'

Заданный режим темы. Это ровно то, что было передано как config.theme или установлено последним вызовом theme.set(). Возвращает 'auto', когда редактор следует настройке ОС, поэтому это не та тема, которая отрисована сейчас.

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

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

TypeScript

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

theme.set(mode)

void

Задать режим темы. Передайте 'light' или 'dark', чтобы закрепить его, либо 'auto', чтобы следовать настройке ОС через prefers-color-scheme.

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

Меняет тему на месте. Редактор не пересоздаётся, содержимое блоков не перерисовывается.

TypeScript

editor.theme.set('dark');

// Back to following the OS
editor.theme.set('auto');

theme.getResolved()

'light' | 'dark'

Тема, которая действительно отрисована. Когда режим равен 'auto', это результат учёта настройки ОС. Используйте её, чтобы привести окружающий интерфейс в соответствие с редактором.

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

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

TypeScript

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