Skip to content

THEME_UPDATE.md

Latest commit

 

History

History
175 lines (129 loc) · 4.39 KB

THEME_UPDATE.md

File metadata and controls

175 lines (129 loc) · 4.39 KB
Raw

Theme Update: OpenCode-Inspired High Contrast

Date: 2026-01-22
Version: v25.3.0+theme-fix

Summary

Updated the color theme to provide high-contrast, readable text on OLED-friendly true black backgrounds, inspired by OpenCode's clarity.

Changes Made

1. Updated Color Palette (src/cli/lib/theme.js)

Text Colors (Much Brighter):

- textPrimary: '#c9d1d9'     // Dim gray (hard to read)
+ textPrimary: '#e6edf3'     // Near white (high contrast)

- textSecondary: '#8b949e'   // Very dim (unreadable)
+ textSecondary: '#b1bac4'   // Light gray (readable)

- textMuted: '#484f58'       // Too dark (invisible)
+ textMuted: '#7d8590'       // Medium gray (still visible)

Accent Colors (Brighter):

- primary: '#58a6ff'         // Medium blue
+ primary: '#79c0ff'         // Bright blue

- accent: '#7ee787'          // Medium green
+ accent: '#56d364'          // Bright green

- warning: '#d29922'         // Dull amber
+ warning: '#e3b341'         // Bright amber

- error: '#f85149'           // Medium coral
+ error: '#ff7b72'           // Bright coral

Special Colors (High Visibility):

- crystallization: '#ffdd57' // Dull gold
+ crystallization: '#f0c862' // Bright gold

- resonanceWave: '#00d4ff'   // Medium cyan
+ resonanceWave: '#56d4dd'   // Bright cyan

- entrainmentPulse: '#c58aff' // Medium violet
+ entrainmentPulse: '#d2a8ff' // Bright violet

2. Custom dim() Function (src/cli/lib/micro-term.js)

Before: Used ANSI dim code (reduces brightness by ~50%, too dark)

const dim = (t) => style(t, 'dim');

After: Uses readable medium gray color

const dim = (t) => {
  if (!shouldUseColor()) return t;
  return `${rgb('#7d8590')}${t}${RESET}`; // Medium gray - readable
};

3. Updated REPL Colors (src/cli/repl.js)

Splash Screen:

- glow(line, 0, 1, '#58a6ff')    // Dim blue
+ glow(line, 0, 1, '#79c0ff')    // Bright blue

- shimmer(title, 0, 1, '#ffdd57') // Dull gold
+ shimmer(title, 0, 1, '#f0c862') // Bright gold

- dim(subtitle)                   // Too dark
+ cyan(subtitle)                  // Bright cyan

Help Text:

- dim(helpText)                   // Barely visible
+ rgb('#b1bac4') + helpText       // Light gray - readable

4. ANSI Theme Mapping

- text: ANSICodes.white          // Standard white
+ text: ANSICodes.brightWhite    // Bright white

- crystallization: ANSICodes.yellow
+ crystallization: ANSICodes.brightYellow

Background Philosophy

OLED-Friendly:

  • Background remains true black (#000000) - saves battery, looks beautiful
  • No light bleed or glow on OLED displays
  • Maximum contrast ratio

Readability First:

  • Primary text near white for maximum readability
  • Secondary text bright enough to read comfortably
  • Even "muted" text is still visible (medium gray, not dark gray)

Inspired by OpenCode:

  • High contrast like VS Code / Claude Desktop
  • Clear visual hierarchy
  • No washed-out or dim colors

Visual Comparison

Before (v25.3.0)

Text: #c9d1d9 (dim gray) ← Hard to read
Muted: #484f58 (very dark) ← Barely visible
Warning: #d29922 (dull amber) ← Low contrast

After (v25.3.0+theme-fix)

Text: #e6edf3 (near white) ← High contrast ✓
Muted: #7d8590 (medium gray) ← Still readable ✓
Warning: #e3b341 (bright amber) ← Clear visibility ✓

Test Commands

# REPL with new theme
zero

# Help menu (test text readability)
zero
> /help

# Brain visualization
zero
> /brain

# CLI commands (session display)
zero session
zero status
zero models

Files Modified

File Purpose Lines Changed
src/cli/lib/theme.js Color palette ~50
src/cli/lib/micro-term.js Custom dim() ~5
src/cli/repl.js Splash screen colors ~10

Benefits

✅ Readability: All text now clearly visible on dark backgrounds
✅ OLED-Friendly: True black background preserved
✅ Consistency: Matches OpenCode/VS Code clarity
✅ Accessibility: Higher contrast ratios across the board
✅ Battery: True black still saves power on OLED

Backward Compatibility

Fully compatible. Colors are subjective preferences with no functional impact.

Related

  • Complements: Session display beautification (BEFORE_AFTER.md)
  • Inspired by: OpenCode's high-contrast theme
  • Maintains: OLED neurophysics principles from original design