Menu
Create cohesive color themes for code editors, terminals, and IDEs. Generates semantic token systems from a brand color with reusable palette variables for rapid iteration.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Audit and update all rampa project documentation after code changes. Use when adding features, changing defaults, modifying APIs, or before a release.
Generate mathematically accurate color palettes using OKLCH color space. Use when creating design systems, color ramps, accessible palettes, CSS variables for themes, or when user asks about color generation.
Generate color ramps designed for WCAG-compliant contrast pairing. Creates 11-step scales with predictable foreground/background combinations.
Expand a single brand color into a complete multi-hue color system using harmonies. Creates primary, analogous, complementary, and split-complementary ramps.
Generate distinct, accessible colors for charts, graphs, and data visualizations. Uses color harmonies for maximum perceptual distinction.
Generate success, warning, danger, and info status colors that harmonize with your brand using square harmony. All colors mathematically derived from one input.
| name | editor-themes |
| description | Create cohesive color themes for code editors, terminals, and IDEs. Generates semantic token systems from a brand color with reusable palette variables for rapid iteration. |
| license | SEE LICENSE IN LICENSE.md |
| metadata | {"author":"ismael.fyi","version":"1.0.0"} |
Generate complete color systems for code editors, terminals, and IDEs from a single brand color. This skill emphasizes semantic token architecture - creating a reusable variable layer that makes theme iteration fast and codebase changes minimal.
npx @basiclines/rampa
The key to maintainable themes is separating palette generation from semantic assignment:
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
โ LAYER 1: Palette Variables (Rampa output) โ
โ --accent-0, --accent-1, ... --accent-9 โ
โ --neutral-0, --neutral-1, ... --neutral-9 โ
โ --syntax-0, --syntax-1, ... (triadic colors) โ
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
โ
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
โ LAYER 2: Semantic Tokens (Your mapping) โ
โ --editor-bg: var(--neutral-9) โ
โ --editor-fg: var(--neutral-1) โ
โ --keyword: var(--accent-4) โ
โ --string: var(--syntax-1-5) โ
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
โ
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
โ LAYER 3: Theme Consumer (VSCode, terminal, etc.) โ
โ "editor.background": "var(--editor-bg)" โ
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
Why this matters: Change --accent-* colors once, and all semantic tokens update. Swap palettes without touching theme code.
A complete editor theme needs:
# Primary accent (your brand color)
rampa -C "<brand-color>" -L 95:15 --size=10 -O css --name=accent
# Neutrals (slightly tinted from brand)
rampa -C "<brand-color>" -L 98:8 -S 3:8 --size=10 -O css --name=neutral
# Syntax colors via triadic harmony (3 distinct hues)
rampa -C "<brand-color>" --add=triadic -L 85:35 -S 80:60 --size=7 -O css --name=syntax
Map palette slots to meaningful roles. This is the abstraction layer that makes themes portable:
:root {
/* โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
EDITOR CHROME (UI elements)
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */
--editor-bg: var(--neutral-9);
--editor-bg-elevated: var(--neutral-8);
--editor-fg: var(--neutral-1);
--editor-fg-muted: var(--neutral-4);
--sidebar-bg: var(--neutral-9);
--sidebar-fg: var(--neutral-2);
--sidebar-border: var(--neutral-7);
--panel-bg: var(--neutral-8);
--panel-border: var(--neutral-7);
/* โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
INTERACTIVE ELEMENTS
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */
--focus-ring: var(--accent-5);
--selection-bg: var(--accent-7);
--selection-fg: var(--neutral-1);
--button-bg: var(--accent-5);
--button-fg: var(--neutral-0);
--button-hover: var(--accent-4);
--link: var(--accent-4);
--link-hover: var(--accent-3);
/* โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
CODE EDITOR
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */
--line-number: var(--neutral-6);
--line-number-active: var(--neutral-3);
--line-highlight: var(--neutral-8);
--cursor: var(--accent-4);
--indent-guide: var(--neutral-7);
--whitespace: var(--neutral-7);
/* โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
SYNTAX HIGHLIGHTING
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */
--syntax-keyword: var(--accent-4);
--syntax-function: var(--syntax-triadic-1-3);
--syntax-string: var(--syntax-triadic-2-3);
--syntax-number: var(--syntax-triadic-2-4);
--syntax-comment: var(--neutral-5);
--syntax-variable: var(--neutral-2);
--syntax-type: var(--syntax-triadic-1-4);
--syntax-constant: var(--accent-3);
--syntax-operator: var(--neutral-3);
--syntax-punctuation: var(--neutral-4);
--syntax-tag: var(--accent-4);
--syntax-attribute: var(--syntax-triadic-1-3);
--syntax-property: var(--syntax-triadic-2-3);
/* โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
DIFF & GIT
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */
--diff-added-bg: oklch(35% 0.15 145);
--diff-added-fg: oklch(80% 0.15 145);
--diff-removed-bg: oklch(30% 0.12 25);
--diff-removed-fg: oklch(75% 0.15 25);
--diff-modified-bg: oklch(32% 0.10 250);
--diff-modified-fg: oklch(78% 0.12 250);
/* โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
DIAGNOSTICS
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */
--error: oklch(65% 0.25 25);
--warning: oklch(75% 0.18 85);
--info: var(--accent-4);
--success: oklch(70% 0.18 145);
}
Same palette, different semantic mapping. This is why the two-layer system shines:
:root[data-theme="light"] {
/* Invert neutral mapping */
--editor-bg: var(--neutral-0);
--editor-bg-elevated: var(--neutral-1);
--editor-fg: var(--neutral-9);
--editor-fg-muted: var(--neutral-6);
--sidebar-bg: var(--neutral-1);
--sidebar-fg: var(--neutral-8);
--sidebar-border: var(--neutral-3);
/* Adjust accent usage for light backgrounds */
--selection-bg: var(--accent-2);
--button-bg: var(--accent-6);
--link: var(--accent-6);
/* Syntax needs more saturation on light */
--syntax-keyword: var(--accent-6);
--syntax-comment: var(--neutral-5);
}
Transform semantic tokens into VSCode's package.json theme format:
{
"name": "My Rampa Theme",
"type": "dark",
"colors": {
"editor.background": "#1a1a1f",
"editor.foreground": "#e5e5e5",
"editor.selectionBackground": "#3b82f640",
"editor.lineHighlightBackground": "#25252a",
"editorLineNumber.foreground": "#525260",
"editorLineNumber.activeForeground": "#a0a0a8",
"editorCursor.foreground": "#60a5fa",
"sideBar.background": "#1a1a1f",
"sideBar.foreground": "#c5c5c8",
"sideBarSectionHeader.background": "#25252a",
"activityBar.background": "#15151a",
"activityBar.foreground": "#e5e5e5",
"statusBar.background": "#15151a",
"statusBar.foreground": "#a0a0a8",
"tab.activeBackground": "#25252a",
"tab.inactiveBackground": "#1a1a1f",
"tab.activeForeground": "#e5e5e5",
"focusBorder": "#3b82f6",
"selection.background": "#3b82f680"
},
"tokenColors": [
{
"name": "Keywords",
"scope": ["keyword", "storage.type", "storage.modifier"],
"settings": { "foreground": "#60a5fa" }
},
{
"name": "Functions",
"scope": ["entity.name.function", "support.function"],
"settings": { "foreground": "#c084fc" }
},
{
"name": "Strings",
"scope": ["string", "string.quoted"],
"settings": { "foreground": "#4ade80" }
},
{
"name": "Numbers",
"scope": ["constant.numeric"],
"settings": { "foreground": "#34d399" }
},
{
"name": "Comments",
"scope": ["comment", "punctuation.definition.comment"],
"settings": { "foreground": "#6b7280", "fontStyle": "italic" }
},
{
"name": "Variables",
"scope": ["variable", "variable.other"],
"settings": { "foreground": "#e5e5e5" }
},
{
"name": "Types",
"scope": ["entity.name.type", "support.type"],
"settings": { "foreground": "#a78bfa" }
},
{
"name": "Constants",
"scope": ["constant", "constant.language"],
"settings": { "foreground": "#93c5fd" }
},
{
"name": "Operators",
"scope": ["keyword.operator"],
"settings": { "foreground": "#c5c5c8" }
},
{
"name": "Punctuation",
"scope": ["punctuation"],
"settings": { "foreground": "#a0a0a8" }
},
{
"name": "Tags (HTML/JSX)",
"scope": ["entity.name.tag"],
"settings": { "foreground": "#60a5fa" }
},
{
"name": "Attributes",
"scope": ["entity.other.attribute-name"],
"settings": { "foreground": "#c084fc" }
}
]
}
Terminals use a standard 16-color ANSI palette. Map from your Rampa ramps:
# Generate terminal-optimized colors
rampa -C "<brand-color>" --add=square -L 70:50 -S 85:75 --size=4 -O json
ANSI Color โ Semantic Role โ Rampa Source
โโโโโโโโโโโโโโโผโโโโโโโโโโโโโโโโโโโโโโโโโโผโโโโโโโโโโโโโโโโโโโโโโโโโ
0 Black โ Background โ neutral-9
1 Red โ Errors, deletions โ square-3 (warm)
2 Green โ Success, additions โ square-1 (green range)
3 Yellow โ Warnings, modified โ square-2 (yellow range)
4 Blue โ Info, links โ accent-5
5 Magenta โ Special, numbers โ triadic-1-5
6 Cyan โ Constants, paths โ triadic-2-4
7 White โ Primary text โ neutral-1
8 Bright Blk โ Comments, muted โ neutral-6
9 Bright Red โ Errors (highlighted) โ square-3 lighter
10 Bright Grn โ Success (highlighted) โ square-1 lighter
11 Bright Yel โ Warnings (highlighted) โ square-2 lighter
12 Bright Blu โ Info (highlighted) โ accent-3
13 Bright Mag โ Special (highlighted) โ triadic-1-3
14 Bright Cyn โ Constants (highlighted) โ triadic-2-2
15 Bright Wht โ Emphasized text โ neutral-0
# Alacritty colors.yml
colors:
primary:
background: '#1a1a1f' # neutral-9
foreground: '#e5e5e5' # neutral-1
normal:
black: '#1a1a1f' # neutral-9
red: '#f87171' # error
green: '#4ade80' # success
yellow: '#fbbf24' # warning
blue: '#60a5fa' # accent-4
magenta: '#c084fc' # triadic-1
cyan: '#34d399' # triadic-2
white: '#e5e5e5' # neutral-1
bright:
black: '#6b7280' # neutral-5
red: '#fca5a5'
green: '#86efac'
yellow: '#fcd34d'
blue: '#93c5fd'
magenta: '#d8b4fe'
cyan: '#5eead4'
white: '#f5f5f5' # neutral-0
Your neutral ramp does 70% of the visual work. Get it right first:
# Dark theme neutrals (rich black, not gray)
rampa -C "<brand-color>" -L 98:8 -S 3:8 --size=10 -O css --name=neutral
10 colors is overkill for syntax. 7 hits the sweet spot:
rampa -C "<brand-color>" --add=triadic -L 80:40 --size=7 -O css --name=syntax
Keep all syntax colors at similar lightness for visual balance:
# Syntax colors with narrow lightness range
rampa -C "<brand-color>" --add=triadic -L 70:55 -S 80:70 --size=5 -O css
Syntax highlighting looks different in practice. Test with:
When colors feel off, regenerate the palette layer:
# Too saturated? Reduce saturation range
rampa -C "#3b82f6" -L 95:15 -S 70:40 --size=10 -O css --name=accent
# Too bright? Narrow lightness ceiling
rampa -C "#3b82f6" -L 85:15 --size=10 -O css --name=accent
Then re-export. Semantic tokens stay unchanged.
# 1. Generate all palettes
rampa -C "#3b82f6" -L 95:15 --size=10 -O css --name=accent
rampa -C "#3b82f6" -L 98:8 -S 3:8 --size=10 -O css --name=neutral
rampa -C "#3b82f6" --add=triadic -L 80:40 -S 80:65 --size=7 -O css --name=syntax
# 2. Combine into single file
cat > theme-tokens.css << 'EOF'
:root {
/* Paste accent output here */
/* Paste neutral output here */
/* Paste syntax output here */
/* Then add semantic layer */
--editor-bg: var(--neutral-9);
--editor-fg: var(--neutral-1);
/* ... rest of semantic tokens */
}
EOF
| Theme Element | Dark Mode Slot | Light Mode Slot |
|---|---|---|
| Editor background | neutral-9 | neutral-0 |
| Editor foreground | neutral-1 | neutral-9 |
| Muted text | neutral-5 | neutral-5 |
| Selection | accent-7 @ 40% | accent-2 @ 40% |
| Focus ring | accent-5 | accent-6 |
| Syntax keyword | accent-4 | accent-6 |
| Syntax function | triadic-1-3 | triadic-1-5 |
| Syntax string | triadic-2-3 | triadic-2-5 |
| Comments | neutral-5 | neutral-5 |
-O json) when building theme files programmatically--add=square for status colors (error/warning/success/info) - guaranteed distinct-H 0:0) for professional-looking neutrals