Load Custom Themes

See the All Built‑in Themes first.

You can load custom themes by passing a Theme object into the themes array.

import { createHighlighter } from 'shiki';

const myTheme = {
  name: 'my-theme',
  settings: [
    {
      scope: ['comment'],
      settings: {
        foreground: '#888',
      },
    },
    // …
  ],
};

const highlighter = await createHighlighter({
  themes: [myTheme],
  langs: [],
});

const code = `console.log('hello')`;
const html = highlighter.codeToHtml(code, {
  lang: 'javascript',
  theme: 'my-theme',
});

You can also load themes after the highlighter has been created.

import { createHighlighter } from 'shiki';
import * as fs from 'fs';

// Load the theme object from a file, a network request, or anywhere
const myTheme = JSON.parse(
  fs.readFileSync('my-theme.json', 'utf8')
);

const highlighter = await createHighlighter({
  langs: ['javascript'],
  themes: [],
});

await highlighter.loadTheme(myTheme);

const code = `console.log('hello')`;
const html = highlighter.codeToHtml(code, {
  lang: 'javascript',
  theme: 'my-theme',
});

The theme itself is a TextMate theme expressed as a JavaScript object.
For example, see the real‑world definition in the official repository:
dark‑plus.json.