A reference for how to use the Eldritch palette across implementations
The circles below represent the three palettes: 🦑 Cthulhu, 🌀 Abyss, 🌅 Dusk in that order.
| Function | Colors | |
|---|---|---|
| Main background | background |
|
| Active line, selections | currentline |
|
| Raised surfaces: cards, sidebars, panels | surface |
|
| Floating layers: tooltips, popovers, menus | overlay |
|
Note
Text placed on a colored accent background should use background for contrast.
| Function | Colors | |
|---|---|---|
| Body copy, primary text | foreground |
|
| Comments, secondary text, subtle labels | comment |
|
| Links, URLs | cyan |
|
| Headings, titles | purple |
|
| Text on accent / colored backgrounds | background |
|
These are the recommended semantic mappings for code highlighting. They apply equally to any syntax engine: tree-sitter, TextMate grammars, Prism, highlight.js, etc.
| Token type | Colors | |
|---|---|---|
| Strings, string templates (incl. docstrings) | yellow · 🌅 orange |
|
| Numbers, constants | red |
|
| Characters, special literals | orange |
|
| Numbers (float), parameters | orange |
|
| Keywords, operators, statements | green · 🌅 pink |
|
| Control flow — conditionals (e.g. if), loops | purple |
|
| Functions, methods | pink |
|
| Built-in functions, identifiers | cyan |
|
| Variables and general text | cyan · 🌅 comment |
|
| Brackets and symbols (e.g. (), {}, []) | foreground |
|
| Types, classes, structs | orange |
|
| Tags (HTML/XML/JSX) | cyan |
|
| Tag attributes | pink |
|
| Comments | comment · 🌅 purple |
|
| Function | Colors | |
|---|---|---|
| Success, additions | green |
|
| Warnings | yellow · 🌅 orange |
|
| Errors, destructive actions | red |
|
| Info, hints, diagnostics | cyan |
|
| Todo, in-progress markers | green · 🌅 purple |
|
| Borders, dividers | currentline |
|
| Focus / active borders | green |
|
| Visual selection highlight | currentline (or at opacity) |
|
| Search match highlight | orange bg, background fg |
|
| Function | Colors | |
|---|---|---|
| Added lines / files | green |
|
| Modified lines / files | orange |
|
| Deleted lines / files | red |
|
| Ignored / untracked | comment |
|
| Renamed | purple |
|
| Added line background | green (15–25% opacity) |
|
| Deleted line background | red (15–25% opacity) |
|
| Changed line background | yellow (15–25% opacity) |
|
| Diff inline text | cyan |
|
When mapping the palette to a 16-color terminal, the following assignments are recommended:
| Slot | Function | Colors | |
|---|---|---|---|
| color0 / black | Terminal black | background |
|
| color8 / bright black | Terminal bright black | currentline |
|
| color7 / white | Terminal white | foreground |
|
| color1 / red | Terminal red | red |
|
| color2 / green | Terminal green | green |
|
| color3 / yellow | Terminal yellow | yellow |
|
| color4 / blue | Terminal blue | comment |
|
| color5 / magenta | Terminal magenta | purple |
|
| color6 / cyan | Terminal cyan | cyan |
|
| color9–color15 | Bright variants | Same hues, lighter value | - |
A quick reference for when to reach for each accent color:
| Accent Colors | |||
|---|---|---|---|
| Color | Cthulhu · Abyss · Dusk | Primary uses | Avoid for |
| Cyan |
|
Links, variables, built-ins, operators, types | Errors, destructive actions |
| Green |
|
Success, additions, keywords, borders · 🌅 decorative use only (diff backgrounds at opacity, icons); prefer pink or purple for text roles |
Errors, warnings · 🌅 foreground text on light surfaces |
| Yellow |
|
Strings, warnings, markup · 🌅 decorative use only (backgrounds, icons); prefer orange for all text roles |
Errors · 🌅 foreground text on light surfaces |
| Orange |
|
Floats, characters, types, modules, search highlight, warnings | - |
| Red |
|
Constants, numbers, errors, deletions, destructive actions | Generic text, low-severity notices |
| Pink |
|
Functions, methods, special literals, tag attributes, characters | - |
| Purple |
|
Control flow, parameters, headings, renamed items | - |