---
title: "Blok Theme API — get, set, getResolved"
description: "Read and switch the editor's light, dark, or auto theme at runtime, and resolve what auto currently evaluates to."
source: https://blokeditor.com/docs/theme-api/
lastmod: 2026-09-08
---

Framework JavaScript

Interface Theme

On this page theme.get()

# 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'.

Last updated Sep 8, 2026 [Edit this page on GitHub](https://github.com/JackUait/blok/blob/main/docs/src/components/api/api-data.ts)

### Reaching the editor instance

The methods below run on the editor you created with new Blok(). They are available once editor.isReady resolves.

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

## 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.

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.

When to use

Switches the theme in place. There is no editor recreation and no re-render of block content.

TypeScript

```
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.

TypeScript

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