---
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-08-01
---

Framework JavaScript

Interface Theme

On this page theme.get()

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

[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 — 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; 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 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.

TypeScript

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