Documentation Index
Fetch the complete documentation index at: https://docs.monolex.ai/llms.txt
Use this file to discover all available pages before exploring further.
What is Hue Inheritance?
Every color in your terminal can inherit some of the theme’s anchor hue. This creates visual unity - everything feels like it belongs together.┌─────────────────────────────────────────────────────────────────────────┐
│ HUE INHERITANCE CONCEPT │
├─────────────────────────────────────────────────────────────────────────┤
│ │
│ Theme Anchor Hue: 250 deg (Blue) │
│ │
│ Original Colors After Inheritance │
│ =============== ================= │
│ │
│ Background │
│ [ Gray ] #1a1a1a --80%--> [ Blue-gray ] #1a1a2e │
│ │
│ Text │
│ [ Gray ] #f0f0f0 --100%--> [Blue-white ] #e8e8f8 │
│ │
│ Border │
│ [ Gray ] #404040 --18%--> [ Hint-blue ] #3e3e44 │
│ │
│ ANSI Red │
│ [ Red ] #ff0000 --8%--> [ Red ] #fd0008 │
│ (Almost unchanged - semantic meaning preserved) │
│ │
└─────────────────────────────────────────────────────────────────────────┘
The Inheritance Pipeline
Each UI element goes through a two-step process to receive its final color.┌─────────────────────────────────────────────────────────────────────────┐
│ HUE INHERITANCE PIPELINE │
├─────────────────────────────────────────────────────────────────────────┤
│ │
│ INPUT: Base colors (background, text) │
│ Anchor hue (theme identity) │
│ Inherit ratio (how much to inherit) │
│ │
│ ┌───────────────────────────────────────────────────────────┐ │
│ │ │ │
│ │ STEP 1: BASE MIXING │ │
│ │ ===================== │ │
│ │ │ │
│ │ Mix background and text in OKLAB space │ │
│ │ (This determines lightness and base saturation) │ │
│ │ │ │
│ │ bg-secondary = 96% bg + 4% text │ │
│ │ bg-tertiary = 92% bg + 8% text │ │
│ │ │ │
│ │ Why OKLAB? Perceptually uniform = no muddy colors │ │
│ │ │ │
│ └─────────────────────────────┬─────────────────────────────┘ │
│ │ │
│ v │
│ ┌───────────────────────────────────────────────────────────┐ │
│ │ │ │
│ │ STEP 2: HUE INJECTION │ │
│ │ ===================== │ │
│ │ │ │
│ │ Blend the mixed color's hue toward anchor hue │ │
│ │ (This adds theme identity) │ │
│ │ │ │
│ │ new_hue = original_hue * (1 - inherit) │ │
│ │ + anchor_hue * inherit │ │
│ │ │ │
│ │ Example (80% inherit): │ │
│ │ new_hue = original * 0.20 + anchor * 0.80 │ │
│ │ = Gray hue * 0.20 + Blue(250) * 0.80 │ │
│ │ = Mostly blue with hint of original │ │
│ │ │ │
│ └───────────────────────────────────────────────────────────┘ │
│ │
│ OUTPUT: Color with theme identity │
│ │
└─────────────────────────────────────────────────────────────────────────┘
The Pure Black Problem
Pure black (#000000) has no hue to blend. It needs special handling.┌─────────────────────────────────────────────────────────────────────────┐
│ THE PURE BLACK PROBLEM │
├─────────────────────────────────────────────────────────────────────────┤
│ │
│ Pure black: #000000 │
│ │ │
│ v │
│ OKLAB: L=0, a=0, b=0 │
│ │ │
│ v │
│ OKLCH: L=0, C=0, H=??? │
│ │
│ ┌───────────────────────────────────────────────────────────────┐ │
│ │ PROBLEM: When Chroma is 0, Hue is undefined! │ │
│ │ │ │
│ │ Hue = atan2(b, a) = atan2(0, 0) = ??? │ │
│ │ │ │
│ │ You can't blend toward anchor hue if there's no hue │ │
│ │ to start with. │ │
│ └───────────────────────────────────────────────────────────────┘ │
│ │
│ After OKLAB mixing with text: │
│ mix(#000000, #f0f0f0, 4%) = #0d0d0d │
│ │ │
│ v │
│ OKLCH: L=0.05, C~0, H=still undefined │
│ │
│ Still no usable hue to blend! │
│ │
└─────────────────────────────────────────────────────────────────────────┘
The Solution: Chroma Boost
┌─────────────────────────────────────────────────────────────────────────┐
│ SOLUTION: CHROMA BOOST │
├─────────────────────────────────────────────────────────────────────────┤
│ │
│ When chroma is near zero, we inject the anchor hue directly │
│ and add a small amount of chroma. │
│ │
│ ┌───────────────────────────────────────────────────────────────┐ │
│ │ if chroma is near zero: │ │
│ │ new_hue = anchor_hue (direct injection) │ │
│ │ new_chroma = base_chroma + chroma_boost │ │
│ └───────────────────────────────────────────────────────────────┘ │
│ │
│ Example (monolex-darknight theme): │
│ │
│ Background: #000000 (pure black) │
│ Anchor hue: 250 deg (Blue) │
│ Chroma boost: 0.012 │
│ │
│ Result for bg-secondary: │
│ - L = 0.05 (from base mixing) │
│ - C = 0.012 (injected) │
│ - H = 250 deg (anchor, directly assigned) │
│ │
│ Final: Very dark background with subtle blue tint │
│ │
└─────────────────────────────────────────────────────────────────────────┘
Text Inheritance
Text typically uses 100% inheritance for strong visual unity.┌─────────────────────────────────────────────────────────────────────────┐
│ TEXT HUE INHERITANCE │
├─────────────────────────────────────────────────────────────────────────┤
│ │
│ text_hue_inherit = 100% (default) │
│ │
│ What this means: │
│ ┌───────────────────────────────────────────────────────────────┐ │
│ │ new_hue = original_hue * 0.00 + anchor_hue * 1.00 │ │
│ │ = anchor_hue │ │
│ │ │ │
│ │ The text's hue completely matches the theme! │ │
│ └───────────────────────────────────────────────────────────────┘ │
│ │
│ Lightness and Chroma are preserved for readability. │
│ Only Hue is unified. │
│ │
│ Example (Blue theme, anchor = 250 deg): │
│ │
│ ┌───────────────────┐ ┌───────────────────┐ │
│ │ coreLight │ │ text-primary │ │
│ │ #f0f0f0 │ │ Same brightness │ │
│ │ (neutral gray) │ │ Blue-tinted │ │
│ └───────────────────┘ └───────────────────┘ │
│ │ ^ │
│ └─── 100% hue inherit ───┘ │
│ │
│ All text levels share the same hue: │
│ - text-primary: Bright, blue-tinted │
│ - text-secondary: Medium, blue-tinted │
│ - text-tertiary: Dim, blue-tinted │
│ │
│ Result: Cohesive, unified text appearance │
│ │
└─────────────────────────────────────────────────────────────────────────┘
Border Inheritance
Borders use lower inheritance to stay subtle.┌─────────────────────────────────────────────────────────────────────────┐
│ BORDER HUE INHERITANCE │
├─────────────────────────────────────────────────────────────────────────┤
│ │
│ border_hue_inherit = 18% (default) │
│ │
│ Why lower? │
│ - Borders are UI separators, not content │
│ - Too strong color is distracting │
│ - Gradual chroma increase expresses visual depth │
│ │
│ ┌───────────────────────────────────────────────────────────────┐ │
│ │ Border Level │ Chroma │ Visual Effect │ │
│ ├──────────────────┼─────────┼─────────────────────────────────┤ │
│ │ border-primary │ 0.061 │ Subtle theme hint │ │
│ │ border-secondary │ 0.073 │ Slightly more visible │ │
│ │ border-light │ 0.085 │ Most visible theme color │ │
│ └───────────────────────────────────────────────────────────────┘ │
│ │
│ Each level adds ~0.012 chroma, creating depth hierarchy. │
│ │
│ Visual representation: │
│ │
│ ┌───────────────────────────┐ │
│ │ Window │ <-- border-light (most visible) │
│ │ ┌─────────────────────┐ │ │
│ │ │ Panel │ │ <-- border-secondary │
│ │ │ ┌───────────────┐ │ │ │
│ │ │ │ Content │ │ │ <-- border-primary (subtle) │
│ │ │ └───────────────┘ │ │ │
│ │ └─────────────────────┘ │ │
│ └───────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────────────┘
ANSI Color Inheritance
ANSI colors carry semantic meaning. Low inheritance preserves this.┌─────────────────────────────────────────────────────────────────────────┐
│ ANSI HUE INHERITANCE │
├─────────────────────────────────────────────────────────────────────────┤
│ │
│ ┌───────────────────────────────────────────────────────────────┐ │
│ │ ANSI Type │ Inherit │ Why │ │
│ ├───────────┼─────────┼─────────────────────────────────────────┤ │
│ │ Normal │ 8% │ Slight theme hint, preserve meaning │ │
│ │ Bright │ 5% │ Already saturated, more sensitive │ │
│ └───────────────────────────────────────────────────────────────┘ │
│ │
│ Terminal output with semantic colors: │
│ │
│ $ git status │
│ [GREEN] modified: src/app.rs <-- GREEN = staged │
│ [RED] deleted: old-file.txt <-- RED = deleted │
│ │
│ $ npm test │
│ [GREEN] 42 tests passed <-- GREEN = success │
│ [RED] 3 tests failed <-- RED = failure │
│ │
│ High inheritance would break this: │
│ ┌───────────────────────────────────────────────────────────────┐ │
│ │ If ansiHueInherit = 80% (too high): │ │
│ │ │ │
│ │ Red (#ff0000) shifts toward blue --> becomes purple │ │
│ │ Green (#00ff00) shifts toward blue --> becomes cyan │ │
│ │ │ │
│ │ User can no longer distinguish success from failure! │ │
│ └───────────────────────────────────────────────────────────────┘ │
│ │
│ With 8% inheritance: │
│ ┌───────────────────────────────────────────────────────────────┐ │
│ │ Red stays red (92% original, 8% blue tint) │ │
│ │ Green stays green (92% original, 8% blue tint) │ │
│ │ │ │
│ │ Semantic meaning preserved, subtle theme harmony added │ │
│ └───────────────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────────────┘
Theme Strategy Comparison
Different themes use different inheritance strategies.┌─────────────────────────────────────────────────────────────────────────┐
│ INHERITANCE STRATEGY COMPARISON │
├─────────────────────────────────────────────────────────────────────────┤
│ │
│ ┌───────────────────────────────────────────────────────────┐ │
│ │ Theme │ bg │ text │ border │ ansi │ Strategy │ │
│ ├──────────────────┼──────┼──────┼────────┼──────┼──────────┤ │
│ │ monolex-night │ 80% │ 100% │ 18% │ 8% │ Balanced │ │
│ │ monolex-darknight│ 100% │ 100% │ 20% │ 10% │ Strong │ │
│ │ monolex-forest │ 0% │ 100% │ 25% │ 15% │ Natural │ │
│ │ dracula │ 0% │ 100% │ 15% │ 8% │ Preserve │ │
│ │ solarized-dark │ 0% │ 100% │ 25% │ 12% │ Classic │ │
│ │ standard │ 0% │ 0% │ 0% │ 0% │ Pure │ │
│ └───────────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────────────────────┐
│ STRATEGY PATTERN DETAILS │
├─────────────────────────────────────────────────────────────────────────┤
│ │
│ PATTERN A: Full Integration │
│ =========================== │
│ ┌───────────────────────────────────────────────────────────────┐ │
│ │ Theme: monolex-night │ │
│ │ │ │
│ │ bgHueInherit: 80% Strong theme in background │ │
│ │ textHueInherit: 100% Fully unified text │ │
│ │ │ │
│ │ Result: Everything feels deeply connected │ │
│ │ Best for: Users who want strong theme immersion │ │
│ └───────────────────────────────────────────────────────────────┘ │
│ │
│ PATTERN B: Selective │
│ =================== │
│ ┌───────────────────────────────────────────────────────────────┐ │
│ │ Theme: monolex-forest │ │
│ │ │ │
│ │ bgHueInherit: 0% BG already green, don't double-apply │ │
│ │ textHueInherit: 100% Text unified with green theme │ │
│ │ │ │
│ │ Result: Natural green without overwhelming │ │
│ │ Best for: Themes with colored backgrounds │ │
│ └───────────────────────────────────────────────────────────────┘ │
│ │
│ PATTERN C: Pure │
│ ============== │
│ ┌───────────────────────────────────────────────────────────────┐ │
│ │ Theme: standard │ │
│ │ │ │
│ │ bgHueInherit: 0% No modification │ │
│ │ textHueInherit: 0% No modification │ │
│ │ ansiHueInherit: 0% No modification │ │
│ │ │ │
│ │ Result: Pure xterm-compatible colors │ │
│ │ Best for: Users who need exact color matching │ │
│ └───────────────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────────────┘
The Color Generation Cascade
Each color level builds on the previous through mixing and inheritance.┌─────────────────────────────────────────────────────────────────────────┐
│ COLOR GENERATION CASCADE │
├─────────────────────────────────────────────────────────────────────────┤
│ │
│ bg-primary: ############################################ │
│ coreDark (100% background, no processing) │
│ │
│ bg-secondary: ############################################── │
│ │ │ │
│ └── Mix: 96% bg + 4% text ───────── ┘ │
│ │ │
│ └── Hue: blend toward anchor (80%) │
│ │
│ bg-tertiary: ########################################──── │
│ │ │ │
│ └── Mix: 92% bg + 8% text ───────┘ │
│ │ │
│ └── Hue: blend toward anchor (80%) │
│ │ │
│ └── Tint: add tint overlay │
│ │
│ Each step: │
│ 1. OKLAB mixing determines lightness/saturation first │
│ 2. Hue inheritance adds theme identity after │
│ │
└─────────────────────────────────────────────────────────────────────────┘
Key Takeaways
- Hue inheritance creates unity - All UI elements share the theme’s color identity
- Two-step process - OKLAB mixing for lightness, then hue blending for identity
- Pure black needs special handling - Chroma boost injects color directly
- ANSI colors need low inheritance - Semantic meaning (red=error) must be preserved
- Different strategies for different themes - Full integration vs. selective vs. pure
Einstein Arc
Learn how colors bend around the theme anchor