Styling & ANSI Colors

The Statusline Editor uses the ANSI 256-color palette to provide a wide range of styling options while ensuring compatibility with modern terminal emulators (Xterm, iTerm2, VS Code, etc.).

Using the ANSI Palette

When you click on a color swatch in the editor, a 256-color picker opens. This palette is divided into three logical sections:

System Colors (0-15): The standard 8 base colors and their "bright" variants.
Color Cube (16-231): A 6x6x6 color matrix providing a rich variety of hues and saturations.
Grayscale (232-255): 24 shades of gray, ranging from near-black to near-white.

The editor automatically generates the necessary escape sequences (\033[38;5;Nm) in the resulting bash script, so you don't have to manually handle shell formatting codes.

Threshold-Based Coloring

One of the most powerful features of the statusline is dynamic coloring based on usage. This is primarily used for the Context % block to give you a quick visual indicator of your remaining context window.

By default, the editor provides three threshold levels:

Safe (0–49%): Default is green (ANSI 82).
Warning (50–79%): Default is yellow (ANSI 226).
Critical (80–100%): Default is red (ANSI 203).

You can customize each of these colors via the Editor panel. When the JSON data from Claude Code updates your context usage, the statusline script instantly switches the text color based on these boundaries.

Progress Bar Styles

For Rate Limit blocks (5h and Weekly), you can toggle visual progress bars. The editor supports several visual styles to match your terminal's aesthetic:

| Style | Preview | Characters Used | | :--- | :--- | :--- | | Classic | ▓▓▓░░ | High-density block and light shade | | Diamond | ◆◆◆◇◇ | Filled and empty diamonds | | Dot | ●●●○○ | Round circles | | Line | ━━━── | Heavy and light horizontal lines | | Gradient | █▓▒░░ | Transitions from solid to light shade | | Emoji | 🔴🔴⚪ | Colored circle emojis (green/yellow/red) |

The Filled Color of these bars is linked to the primary block color, while the Empty Color is automatically adjusted based on whether you are using a light or dark terminal background.

Global Separators

To maintain a clean layout, you can enable a global separator between blocks.

Style: Choose between symbols like |, ·, or —.
Spacing: The editor adds consistent padding around separators.
Color: It is recommended to use a dimmed color (like ANSI 243) for separators to keep the focus on the data blocks.

Previewing Themes

Terminal backgrounds vary, so the editor includes a Theme Toggle (Sun/Moon icon) in the preview window. This allows you to check how your chosen ANSI colors look on both Dark and Light backgrounds before exporting your script.

Note: Some terminal themes (like Solarized or Gruvbox) might remap the first 16 ANSI colors. If your colors look unexpected, try using codes from the 16–255 range for more consistent results across different machines.