Theme & Variable System

Theme Architecture

The Statusline Editor utilizes a CSS-variable-driven architecture to maintain visual consistency across the interface and the terminal preview. The system distinguishes between the Application UI theme (the editor panels) and the Terminal Preview theme (the simulated Claude Code environment).

CSS Custom Properties

The visual design is governed by a set of custom properties defined in styles/variables.css. These variables control the color palette, spacing, and component states.

| Variable | Description | | :--- | :--- | | --bg[1-4] | Background color steps, from primary containers to nested panels. | | --border | Standard border color for dividers and inputs. | | --border-hi | High-contrast border color for hovered elements. | | --text | Primary foreground color. | | --text-dim | Muted text for labels and secondary information. | | --accent | Highlight color used for active states and primary buttons. | | --accent-dim | Soft version of the accent color for background highlights. |

To customize the UI skin, you can override these variables in a <style> block:

:root {
  --accent: #d97757; /* Custom primary brand color */
  --font: 'Geist Mono', monospace;
}

Preview Theme Switching

The editor includes a dedicated theme engine for the terminal preview, allowing you to verify how your statusline configuration looks in both light and dark terminal emulators.

Implementation Details

Theme switching is handled by js/theme.js. When a user toggles the theme, the system applies the .light-mode class to the .term-window container. This specifically affects the terminal body and the rendered statusline blocks.

// Example: Programmatically setting the theme
setTheme('light'); // Options: 'light', 'dark'

State Persistence

The chosen theme and all variable configurations are persisted in the browser's localStorage via the STORAGE_KEY defined in js/state.js. This ensures that your preferences—including the active preview mode—remain consistent across sessions.

ANSI Color System

While the UI uses CSS variables, the statusline itself generates ANSI 256-color escape sequences. The system provides a translation layer to bridge these two environments.

Conversion Logic

The js/ansi.js utility provides functions to convert terminal color codes into CSS-compatible values for the web preview:

• ansiToCSS(n): Converts an ANSI integer (0-255) into an RGB or Hex string.
• ansiEscape(n): Generates the raw escape string (\033[38;5;...m) used in the final Bash script.

Configuration

Users can select colors via the ANSI Palette Picker, which maps traditional terminal colors to the UI:

1. Standard/Bright (0-15): The base 16 terminal colors.
2. Color Cube (16-231): The extended 216-color range.
3. Grayscale (232-255): 24 levels of gray for subtle UI elements.

Example of how a block color is defined in the state:

{
  id: 'model',
  name: 'Model',
  enabled: true,
  color: 254 // ANSI code for near-white
}

Dynamic Thresholds

The Variable System supports dynamic values based on logic thresholds (e.g., the Context window changing color as it fills). These are configured in the Context % block and rendered dynamically in js/preview.js using the getContextColor(percent) helper.

| Percent Range | Default ANSI Color | | :--- | :--- | | 0% – 49% | 82 (Green) | | 50% – 79% | 226 (Yellow) | | 80% – 100% | 203 (Red) |