Theme System

Overview

The theme system provides a complete theming solution with 9 pre-configured themes and support for custom theme creation. Each theme defines colors for the editor, sidebar, status bar, and syntax highlighting.

Available Themes

The THEMES array contains all available theme configurations:

Light (vs)

Classic light theme with high contrast

Dark (vs-dark)

Standard dark theme with blue accents

GitHub Dark

GitHub’s dark color scheme

GitHub Light

GitHub’s light color scheme

Dracula

Popular purple-tinted dark theme

Monokai

Classic Monokai color scheme

Nord

Arctic-inspired blue theme

One Dark Pro

Atom-inspired dark theme

Tokyo Night

Japanese night-inspired theme

ThemeConfig Interface

Defines the structure of a theme configuration object.

string

required

Unique identifier for the theme (e.g., "vs-dark", "dracula")

name

string

required

Display name shown in the UI (e.g., "Dark", "Dracula")

editor

object

required

Editor area styling configuration

Show properties

string

required

Background color (hex format)

string

required

Foreground/text color (hex format)

fontFamily

string

Optional font family override. Default: "'Geist Mono', 'Fira Code', 'JetBrains Mono', Consolas, 'Courier New', monospace"

sidebar

object

required

File explorer sidebar styling

Show properties

string

required

Background color (hex format)

string

required

Text color (hex format)

statusbar

object

required

Bottom status bar styling

Show properties

string

required

Background color (hex format)

string

required

Text color (hex format)

body

object

Application body/background styling

Show properties

string

required

Background color (hex format)

string

required

Text color (hex format)

openFilePill

object

Open file tab styling

Show properties

string

required

Background color (hex format)

string

required

Text color (hex format)

syntax

object

required

Syntax highlighting color definitions

Show properties

keyword

string

required

Keywords like if, const, return

string

required

String literals

comment

string

required

Code comments

number

string

required

Numeric literals

function

string

required

Function names

operator

string

required

Operators like +, =, &&

variable

string

required

Variable names

type

string

required

Type names and annotations

property

string

required

Object properties

bracket

string

required

Brackets and braces

tag

string

required

HTML/XML tags

attribute

string

required

HTML/XML attributes

heading

string

required

Markdown headings

emphasis

string

required

Italic/emphasized text

strong

string

required

Bold/strong text

link

string

required

Hyperlinks

Functions

getTheme

Retrieves a theme configuration by ID. Falls back to the first theme (Light) if the ID is not found.

string

required

Theme identifier to retrieve

return

ThemeConfig

The matching theme configuration object, or the default Light theme

import { getTheme } from './lib/themes';

const darkTheme = getTheme('vs-dark');
const customTheme = getTheme('tokyo-night');
const fallback = getTheme('nonexistent'); // Returns Light theme

Usage Examples

Accessing Theme Properties

import { getTheme } from './lib/themes';

const theme = getTheme('dracula');

// Access editor colors
console.log(theme.editor.bg);  // "#282a36"
console.log(theme.editor.fg);  // "#f8f8f2"

// Access syntax colors
console.log(theme.syntax.keyword);  // "#ff79c6"
console.log(theme.syntax.string);   // "#f1fa8c"

Creating a Custom Theme

import { ThemeConfig } from './lib/types';

const customTheme: ThemeConfig = {
  id: 'my-theme',
  name: 'My Custom Theme',
  editor: {
    bg: '#1a1a1a',
    fg: '#e0e0e0',
    fontFamily: "'Fira Code', monospace"
  },
  sidebar: {
    bg: '#0d0d0d',
    fg: '#cccccc'
  },
  statusbar: {
    bg: '#007acc',
    fg: '#ffffff'
  },
  syntax: {
    keyword: '#569cd6',
    string: '#ce9178',
    comment: '#6a9955',
    number: '#b5cea8',
    function: '#dcdcaa',
    operator: '#d4d4d4',
    variable: '#9cdcfe',
    type: '#4ec9b0',
    property: '#9cdcfe',
    bracket: '#ffd700',
    tag: '#569cd6',
    attribute: '#9cdcfe',
    heading: '#569cd6',
    emphasis: '#ce9178',
    strong: '#ce9178',
    link: '#3794ff'
  }
};

Using with EditorContext

import { useEditor } from './lib/editor-context';

function ThemeSelector() {
  const { currentTheme, setSelectedTheme } = useEditor();
  
  return (
    <div style={{ 
      backgroundColor: currentTheme.editor.bg,
      color: currentTheme.editor.fg 
    }}>
      <button onClick={() => setSelectedTheme('dracula')}>
        Switch to Dracula
      </button>
    </div>
  );
}

Theme List

All available theme IDs for use with getTheme() or setSelectedTheme():

vs - Light
vs-dark - Dark
github-dark - GitHub Dark
github-light - GitHub Light
dracula - Dracula
monokai - Monokai
nord - Nord
one-dark-pro - One Dark Pro
tokyo-night - Tokyo Night

Components

Configuration

Overview

Available Themes

Light (vs)

Dark (vs-dark)

GitHub Dark

GitHub Light

Dracula

Monokai

Nord

One Dark Pro

Tokyo Night

ThemeConfig Interface

Functions

getTheme

Usage Examples

Accessing Theme Properties

Creating a Custom Theme

Using with EditorContext

Theme List

Build docs developers (and LLMs) love

Components

Configuration

​Overview

​Available Themes

Light (vs)

Dark (vs-dark)

GitHub Dark

GitHub Light

Dracula

Monokai

Nord

One Dark Pro

Tokyo Night

​ThemeConfig Interface

​Functions

​getTheme

​Usage Examples

​Accessing Theme Properties

​Creating a Custom Theme

​Using with EditorContext

​Theme List

Build docs developers (and LLMs) love

Overview

Available Themes

ThemeConfig Interface

Functions

getTheme

Usage Examples

Accessing Theme Properties

Creating a Custom Theme

Using with EditorContext

Theme List