Theme Architecture

Hone uses VSCode-compatible JSON themes for both workbench colors and syntax highlighting. Themes are applied at two levels and can be switched at runtime without restarting the IDE.

Theme Format

Themes use the standard VSCode JSON theme format, making it possible to import any existing VSCode theme directly.

{
  "name": "Hone Dark",
  "type": "dark",
  "colors": {
    "editor.background": "#1e1e1e",
    "editor.foreground": "#d4d4d4",
    "sideBar.background": "#252526",
    "statusBar.background": "#007acc",
    "activityBar.background": "#333333"
  },
  "tokenColors": [
    {
      "scope": ["keyword", "storage.type"],
      "settings": {
        "foreground": "#569cd6"
      }
    },
    {
      "scope": ["string"],
      "settings": {
        "foreground": "#ce9178"
      }
    }
  ]
}

Two-Layer System

UI Theme (Workbench Colors)

The colors object defines colors for every workbench element:

• Editor: background, foreground, line highlight, selection, cursor
• Sidebar: background, foreground, border
• Activity bar: background, foreground, badge
• Status bar: background, foreground (normal, debugging, no-folder)
• Tabs: active/inactive background and foreground, border
• Panel: background, border
• Title bar: background, foreground
• Input fields, dropdowns, buttons, scrollbars, minimap, etc.

Colors are accessed through getter functions:

getEditorBackground()
getEditorForeground()
getSideBarBackground()
getStatusBarBackground()
getActivityBarBackground()
getTabActiveBackground()
getTabInactiveBackground()
getPanelBackground()
// ... and many more

Token Theme (Syntax Highlighting)

The tokenColors array maps TextMate scopes to colors and font styles:

• keyword – language keywords (if, else, return, etc.)
• string – string literals
• comment – comments
• variable – variable names
• function – function names and calls
• type – type names, classes, interfaces
• constant – constants, numbers, booleans
• operator – operators
• punctuation – brackets, semicolons, commas

Token scopes support dot-separated specificity (e.g., entity.name.function.typescript is more specific than entity.name.function).

Built-in Themes

15 themes ship with the IDE (hone-themes package):

WCAG Contrast Validation

The hone-themes package includes 452 tests (via Jest) that validate:

• Schema validation – every theme conforms to the expected JSON structure
• WCAG contrast ratios – text colors meet accessibility contrast requirements against their backgrounds
  • Normal text: minimum 4.5:1 contrast ratio (AA)
  • Large text: minimum 3:1 contrast ratio (AA)
• Required color keys – all themes define the minimum set of required colors
• Token color coverage – all themes provide colors for core syntax scopes

Run theme tests:

cd hone-themes && npm test

Importing VSCode Themes

Any VSCode JSON theme file can be imported directly:

1. Place the .json theme file in the themes directory
2. The theme engine reads and parses the VSCode format natively
3. No conversion or transformation step is needed

This compatibility means the thousands of themes available in the VSCode ecosystem work in Hone out of the box.

Theme Application

When a theme is applied:

1. The theme JSON is parsed and colors are resolved (including defaults for missing keys)
2. Workbench colors are set on all UI elements via getter functions
3. Token colors are compiled into a scope-to-style lookup table for the tokenizer
4. The editor re-renders with the new colors
5. The selected theme is persisted in user settings

Theme switching is instant – no restart required.