Overview
The Tint System uses four distinct parameter groups. Each controls a different aspect of color transformation.┌─────────────────────────────────────────────────────────────────────────┐
│ PARAMETER GROUP MAP │
├─────────────────────────────────────────────────────────────────────────┤
│ │
│ TINT ANCHOR │
│ (What color (Theme identity │
│ to add) reference) │
│ \ / │
│ \ / │
│ ┌───────────────────────────┐ │
│ │ │ │
│ │ YOUR THEME COLORS │ │
│ │ │ │
│ └───────────────────────────┘ │
│ / \ │
│ / \ │
│ ARC INHERIT │
│ (How to bend (How much UI │
│ complementary) gets theme color) │
│ │
└─────────────────────────────────────────────────────────────────────────┘
Group 1: Tint Parameters
Tint adds a subtle color overlay to all colors. Like looking through tinted glass.┌─────────────────────────────────────────────────────────────────────────┐
│ TINT: COLOR OVERLAY │
├─────────────────────────────────────────────────────────────────────────┤
│ │
│ tintHue: 0-360 degrees │
│ ========================= │
│ │
│ The color direction all colors are pulled toward. │
│ │
│ 0 deg (Red) │
│ * │
│ / \ │
│ / \ │
│ 330 / \ 30 │
│ (Pink)* *(Orange) │
│ / \ │
│ / \ │
│ 270 *────┬ ┬────* 90 │
│ (Blue) │ │ (Yellow) │
│ \ / │
│ \ / │
│ 210 * * 150 │
│ (Cyan) \ / (Green) │
│ \ / │
│ \ / │
│ * │
│ 180 deg (Cyan) │
│ │
│ Common tintHue values: │
│ ┌───────────────────────────────────────────────────────────────┐ │
│ │ 250 deg │ Blue │ monolex-night, dracula, one-dark │ │
│ │ 200 deg │ Cyan │ solarized │ │
│ │ 30 deg │ Orange │ warm themes │ │
│ │ 130 deg │ Green │ nature themes │ │
│ └───────────────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────────────────────┐
│ tintStrength: 0-100% │
│ ==================== │
│ │
│ How much tint to apply. │
│ │
│ 0% │────│ Almost invisible │
│ 5% │════════│ Subtle harmony (recommended) │
│ 15% │════════════════│ Noticeable bias │
│ 30% │════════════════════════│ Strong theme │
│ 50% │════════════════════════════════│ Extreme │
│ │
│ Recommended: 5-15% for natural look │
│ │
└─────────────────────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────────────────────┐
│ tintChroma: 0.00-0.40 │
│ ===================== │
│ │
│ How saturated the tint color itself is. │
│ │
│ 0.00 [ Gray ] No color at all │
│ 0.02 [ Subtle Blue ] Very soft hint (default) │
│ 0.05 [ Clear Blue ] Noticeable color │
│ 0.10 [ Vivid Blue ] Strong presence │
│ 0.15+ [BRIGHT BLUE ] May clip in sRGB │
│ │
└─────────────────────────────────────────────────────────────────────────┘
Group 2: Anchor Parameters
The anchor defines your theme’s identity color. This is the “home base” other colors relate to.┌─────────────────────────────────────────────────────────────────────────┐
│ ANCHOR: THEME IDENTITY │
├─────────────────────────────────────────────────────────────────────────┤
│ │
│ darkAnchorHue: 0-360 degrees │
│ ============================ │
│ │
│ The theme's "home" color. All other colors are measured relative │
│ to this anchor. │
│ │
│ Example: Blue theme (anchor = 250 deg) │
│ │
│ Color Wheel │
│ │
│ Red (0 deg) │
│ * │
│ / \ │
│ Orange * * Pink │
│ / \ │
│ Yellow * @ * Magenta │
│ / ANCHOR \ │
│ Green * (250 deg) * Blue <── Theme's home │
│ \ / │
│ Cyan * * Indigo │
│ \ / │
│ * * │
│ │
│ The anchor determines: │
│ - Where the Caustic zone forms (opposite side) │
│ - What hue backgrounds and text inherit │
│ - The "gravity center" for Frame Drag │
│ │
└─────────────────────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────────────────────┐
│ darkAnchorChroma: 0.00-0.40 │
│ =========================== │
│ │
│ How colorful dark backgrounds appear. │
│ │
│ 0.00 │####################│ Pure gray background │
│ 0.02 │####################│ Subtle blue tint (default) │
│ 0.05 │####################│ Clear theme color visible │
│ │
│ Higher values = more obvious theme color in dark areas │
│ │
└─────────────────────────────────────────────────────────────────────────┘
Anchor vs Tint
These are often the same, but can differ for special effects.┌─────────────────────────────────────────────────────────────────────────┐
│ ANCHOR vs TINT SEPARATION │
├─────────────────────────────────────────────────────────────────────────┤
│ │
│ SAME (most themes): │
│ ┌───────────────────────────────────────────────────────────────┐ │
│ │ tintHue = 250 deg (Blue) │ │
│ │ darkAnchorHue = 250 deg (Blue) │ │
│ │ │ │
│ │ Result: Unified blue theme │ │
│ └───────────────────────────────────────────────────────────────┘ │
│ │
│ DIFFERENT (special effect): │
│ ┌───────────────────────────────────────────────────────────────┐ │
│ │ tintHue = 30 deg (Orange) <── warm overlay │ │
│ │ darkAnchorHue = 250 deg (Blue) <── bend around blue │ │
│ │ │ │
│ │ Result: "Warm sunset on blue night" effect │ │
│ │ - Colors bend around blue (Einstein Arc) │ │
│ │ - But have warm orange undertone (Tint) │ │
│ └───────────────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────────────┘
Group 3: Arc Parameters (Einstein Arc)
These control how colors in the complementary zone are compressed and redistributed.┌─────────────────────────────────────────────────────────────────────────┐
│ ARC: EINSTEIN ARC SETTINGS │
├─────────────────────────────────────────────────────────────────────────┤
│ │
│ pullComplementary: -180 to 180 degrees │
│ ====================================== │
│ │
│ Offset from complementary to find the Caustic center. │
│ │
│ For Blue theme (anchor = 250 deg): │
│ │
│ Anchor: 250 deg (Blue) │
│ │ │
│ └── add 180 deg │
│ │ │
│ Complementary: 70 deg (Yellow-Green) │
│ │ │
│ └── add 60 deg (pullComplementary) │
│ │ │
│ Caustic Center: 130 deg (Green) <── This is where colors compress │
│ │
│ Why offset by 60 deg? │
│ - Complementary (70 deg) is useful for syntax highlighting │
│ - Offsetting targets less-used greens instead │
│ - Preserves important yellow-green contrasts │
│ │
└─────────────────────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────────────────────┐
│ pullWidth: 0-180 degrees │
│ ======================== │
│ │
│ Half-width of the Caustic zone. │
│ │
│ pullWidth = 60 deg (narrow) │
│ │<─── 60 ───>│<─── 60 ───>│ │
│ [ ZONE ] │
│ ^ center │
│ │
│ pullWidth = 90 deg (default) │
│ │<──────── 90 ───────>│<──────── 90 ───────>│ │
│ [ ZONE ] │
│ ^ center │
│ │
│ pullWidth = 130 deg (wide) │
│ │<─────────── 130 ───────────>│<─────────── 130 ───────────>│ │
│ [ ZONE ] │
│ ^ center │
│ │
│ Wider = more colors affected = stronger theme unity │
│ │
└─────────────────────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────────────────────┐
│ pullStrength: 0-100% │
│ ==================== │
│ │
│ How much to compress colors in the zone. │
│ │
│ 0% │ No compression (bypass) │
│ 10% │ Subtle harmony (default) <── recommended │
│ 30% │ Noticeable, clear theme bias │
│ 50% │ Strong, reduced color diversity │
│ 100% │ All zone colors collapse to center │
│ │
└─────────────────────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────────────────────┐
│ pullMode: 0, 1, or 2 │
│ ==================== │
│ │
│ Mode 0: NONE │
│ ┌────────────────────────────────────────────────────────────┐ │
│ │ No transformation. Colors pass through unchanged. │ │
│ └────────────────────────────────────────────────────────────┘ │
│ │
│ Mode 1: COMPRESS │
│ ┌────────────────────────────────────────────────────────────┐ │
│ │ Hue-only compression. May cause discontinuities. │ │
│ └────────────────────────────────────────────────────────────┘ │
│ │
│ Mode 2: COMPRESS + GRADIENT (default, recommended) │
│ ┌────────────────────────────────────────────────────────────┐ │
│ │ Outside zone: Compress hues (smooth redistribution) │ │
│ │ Inside zone: OKLAB gradient (smooth transitions) │ │
│ │ │ │
│ │ This prevents the "muddy middle" problem. │ │
│ └────────────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────────────┘
Group 4: Inherit Parameters
These control how much different UI elements inherit the theme’s anchor hue.┌─────────────────────────────────────────────────────────────────────────┐
│ INHERIT: HUE INHERITANCE │
├─────────────────────────────────────────────────────────────────────────┤
│ │
│ How much each UI element takes on the theme's anchor hue. │
│ │
│ ┌───────────────────────────────────────────────────────────────┐ │
│ │ Parameter │ Default │ What it affects │ │
│ ├────────────────────┼─────────┼───────────────────────────────┤ │
│ │ bgHueInherit │ 80% │ Background colors │ │
│ │ textHueInherit │ 100% │ Text colors │ │
│ │ borderHueInherit │ 18% │ Border colors │ │
│ │ ansiHueInherit │ 8% │ Normal ANSI (ls colors, etc) │ │
│ │ brightHueInherit │ 5% │ Bright ANSI colors │ │
│ └───────────────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────────────────────┐
│ INHERITANCE VISUALIZATION │
├─────────────────────────────────────────────────────────────────────────┤
│ │
│ Anchor Hue: 250 deg (Blue) │
│ │
│ BACKGROUND (80% inherit) │
│ Original: [ Gray ] #1a1a1a │
│ After: [ Blue-ish] #1a1a2e (Strong theme color) │
│ │
│ TEXT (100% inherit) │
│ Original: [ Gray ] #f0f0f0 │
│ After: [Blue-tint] #e8e8f0 (Fully unified with theme) │
│ │
│ BORDER (18% inherit) │
│ Original: [ Gray ] #404040 │
│ After: [Hint blue] #3e3e44 (Subtle theme hint) │
│ │
│ ANSI RED (8% inherit) │
│ Original: [ Red ] #ff0000 │
│ After: [ Red ] #fd0008 (Almost unchanged - semantic preserved) │
│ │
└─────────────────────────────────────────────────────────────────────────┘
Why ANSI Colors Have Low Inheritance
ANSI colors carry meaning. Red means error. Green means success. High inheritance would destroy this.┌─────────────────────────────────────────────────────────────────────────┐
│ ANSI LOW INHERITANCE REASON │
├─────────────────────────────────────────────────────────────────────────┤
│ │
│ Terminal output with semantic colors: │
│ │
│ $ git status │
│ modified: [GREEN] src/app.rs <── GREEN = staged │
│ deleted: [RED] old-file.txt <── RED = deleted │
│ │
│ $ npm test │
│ [GREEN] 42 tests passed <── GREEN = success │
│ [RED] 3 tests failed <── RED = failure │
│ │
│ If ansiHueInherit was high (e.g., 80%): │
│ - Red would shift toward blue (becomes purple) │
│ - Green would shift toward blue (becomes cyan) │
│ - You lose the semantic meaning! │
│ │
│ Solution: 8% inherit for normal, 5% for bright │
│ - Just a subtle theme hint │
│ - Semantic colors 92-95% preserved │
│ - Theme harmony handled by Einstein Arc instead │
│ │
└─────────────────────────────────────────────────────────────────────────┘
Theme Strategy Patterns
Different themes use different inheritance strategies.┌─────────────────────────────────────────────────────────────────────────┐
│ INHERITANCE STRATEGY PATTERNS │
├─────────────────────────────────────────────────────────────────────────┤
│ │
│ PATTERN A: Full Integration (monolex-night) │
│ ┌───────────────────────────────────────────────────────────────┐ │
│ │ bgHueInherit: 80% │ Strong theme in background │ │
│ │ textHueInherit: 100% │ Fully unified text │ │
│ │ ansiHueInherit: 8% │ ANSI preserved │ │
│ │ │ │
│ │ Result: Very cohesive, strongly themed experience │ │
│ └───────────────────────────────────────────────────────────────┘ │
│ │
│ PATTERN B: Selective (monolex-forest) │
│ ┌───────────────────────────────────────────────────────────────┐ │
│ │ bgHueInherit: 0% │ Background already green, don't add │ │
│ │ textHueInherit: 100% │ Text unified with theme │ │
│ │ ansiHueInherit: 15% │ Slightly more harmony │ │
│ │ │ │
│ │ Result: Natural green background, unified text │ │
│ └───────────────────────────────────────────────────────────────┘ │
│ │
│ PATTERN C: Pure (standard/xterm) │
│ ┌───────────────────────────────────────────────────────────────┐ │
│ │ bgHueInherit: 0% │ No theme color │ │
│ │ textHueInherit: 0% │ No theme color │ │
│ │ ansiHueInherit: 0% │ No theme color │ │
│ │ │ │
│ │ Result: Pure xterm-compatible colors, no transformation │ │
│ └───────────────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────────────┘
Theme Configuration Examples
┌─────────────────────────────────────────────────────────────────────────┐
│ EXAMPLE THEME CONFIGURATIONS │
├─────────────────────────────────────────────────────────────────────────┤
│ │
│ MONOLEX NIGHT (Blue, Full Integration) │
│ ┌───────────────────────────────────────────────────────────────┐ │
│ │ tintHue: 250 tintStrength: 10 tintChroma: 0.02 │ │
│ │ darkAnchorHue: 250 darkAnchorChroma: 0.02 │ │
│ │ bgHueInherit: 80 textHueInherit: 100 │ │
│ └───────────────────────────────────────────────────────────────┘ │
│ │
│ SOLARIZED DARK (Cyan Accent) │
│ ┌───────────────────────────────────────────────────────────────┐ │
│ │ tintHue: 200 tintStrength: 15 tintChroma: 0.03 │ │
│ │ darkAnchorHue: 200 darkAnchorChroma: 0.03 │ │
│ └───────────────────────────────────────────────────────────────┘ │
│ │
│ DRACULA (No Tinting, Original Colors) │
│ ┌───────────────────────────────────────────────────────────────┐ │
│ │ tintHue: 250 tintStrength: 0 tintChroma: 0 │ │
│ │ darkAnchorHue: 250 darkAnchorChroma: 0.02 │ │
│ └───────────────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────────────┘
Key Takeaways
- TINT - Adds color overlay (like tinted glass)
- ANCHOR - Defines theme identity (the “home” color)
- ARC - Controls Einstein Arc (how complementary colors bend)
- INHERIT - How much UI elements adopt theme color
Einstein Arc
Learn how the Einstein Arc algorithm bends colors