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:
- Standard/Bright (0-15): The base 16 terminal colors.
- Color Cube (16-231): The extended 216-color range.
- 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) |