Overview
The Tint System uses four distinct parameter groups. Each controls a different aspect of color transformation.Copy
+-------------------------------------------------------------------------+
| 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.Copy
+-------------------------------------------------------------------------+
| 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 | |
| +---------------------------------------------------------------+ |
| |
+-------------------------------------------------------------------------+
Copy
+-------------------------------------------------------------------------+
| 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 |
| |
+-------------------------------------------------------------------------+
Copy
+-------------------------------------------------------------------------+
| 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.Copy
+-------------------------------------------------------------------------+
| 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 |
| |
+-------------------------------------------------------------------------+
Copy
+-------------------------------------------------------------------------+
| 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.Copy
+-------------------------------------------------------------------------+
| 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.Copy
+-------------------------------------------------------------------------+
| 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 |
| |
+-------------------------------------------------------------------------+
Copy
+-------------------------------------------------------------------------+
| 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 |
| |
+-------------------------------------------------------------------------+
Copy
+-------------------------------------------------------------------------+
| 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 |
| |
+-------------------------------------------------------------------------+
Copy
+-------------------------------------------------------------------------+
| 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.Copy
+-------------------------------------------------------------------------+
| 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 | |
| +---------------------------------------------------------------+ |
| |
+-------------------------------------------------------------------------+
Copy
+-------------------------------------------------------------------------+
| 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.Copy
+-------------------------------------------------------------------------+
| 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.Copy
+-------------------------------------------------------------------------+
| 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
Copy
+-------------------------------------------------------------------------+
| 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