Advanced Colors: Tweak CSS Variables for Codex Themes

You can switch themes now, but something still feels off — that blue is too bright, that green isn't popping enough. The real power of Codex themes lies in CSS variables: every color is an adjustable knob, not a fixed coat of paint.

CSS Variable Structure in Codex Themes

Every Codex theme file (.tmTheme or .codedrobe) is essentially a set of CSS variable definitions. Core variables include: --background, --foreground, --caret, --selection, --gutter-background, --gutter-foreground, --line-number, --indent-guide, --bracket-matcher, and the --syntax-* family.

Syntax variables cover all language elements: --syntax-keyword, --syntax-string, --syntax-comment, --syntax-number, --syntax-function, --syntax-variable, --syntax-class, --syntax-type, --syntax-operator, --syntax-tag, --syntax-attribute, --syntax-regex, --syntax-property.

In Practice: Tuning Syntax Highlights

Say you find keywords too harsh. Find the --syntax-keyword variable in your theme file and change the color from #ff7b72 (bright red) to #a371f7 (soft purple). Save and hot-reload to see the effect immediately.

• Use Codex Skin Studio's live preview — tweak and see results in real time
• Adjust one variable at a time to isolate issues
• Document your changes for future reference

Color Tuning Principles

Good color tuning follows three principles: contrast (ensure readability), harmony (colors don't clash), and consistency (same element types use the same color).

FAQ