True Colors
A VSCode extension that displays color previews for CSS custom properties (variables) that use RGB or RGBA format.
Features
- 🎨 Color Background Highlighting: Shows colored backgrounds for CSS variables and Tailwind classes
- 🟥 Decoration Style Choice: Display colors as a full highlight or a small inline color swatch
- 💡 Hover Tooltips: Rich per-context tooltips showing color swatches and RGB values for every detected context (
.light, .dark, etc.) — works on definition lines and usages alike
- 🎯 Tailwind CSS Support: Detects and shows colors for Tailwind utility classes
- 🌓 Multi-Context Support: Detect and switch between light/dark/custom color modes
- 🗂️ File Type Control: Choose where decorations appear (
css, ts, tsx, js, jsx)
- 🔄 Auto-Refresh: Updates when CSS files change, preserving multi-file context data
- ⚡ Optimized Performance: esbuild bundling, debounced updates, LRU caching, pre-compiled patterns, O(1) color lookups
- 🌐 VSCode Web Compatible: Works on github.dev and vscode.dev
- 📁 Multi-File Support: Works in TypeScript, React, JavaScript, and CSS files
1. CSS Variable Definitions
/* RGB format (space-separated) */
--neutral-bg: 248 250 252;
/* RGBA format (with opacity using /) */
--topologyHighlightPulse: 87 91 239 / 0.2;
2. CSS Variable Usage
/* Direct usage */
background: var(--neutral-bg);
/* Wrapped in color functions */
fill: rgba(var(--content-highlight));
stroke: rgb(var(--neutral-outline));
// In React/TypeScript files
<div style={{ background: 'var(--neutral-bg)' }} />
<rect fill="rgba(var(--content-highlight))" />
3. Tailwind CSS Classes (NEW! ✨)
// Standard Tailwind colors
<div className="text-red-500 bg-blue-200 border-green-300">
// ^^^^^^^^^^^^ - Shows red color
// ^^^^^^^^^^^ - Shows blue color
// ^^^^^^^^^^^^^^^^ - Shows green color
// Custom Tailwind colors (from your tailwind.config.js)
<div className="text-txt-primary bg-card border-separator">
// ^^^^^^^^^^^^^^^^ - Shows your custom color
// ^^^^^^^ - Shows your custom color
// ^^^^^^^^^^^^^^^^^ - Shows your custom color
// Gradient colors
<div className="from-purple-500 to-pink-500">
// ^^^^^^^^^^^^^^^ - Shows purple
// ^^^^^^^^^^^ - Shows pink
Supported Tailwind prefixes:
text- - Text colorsbg- - Background colorsborder- - Border colorsfrom-, to-, via- - Gradient colorsring- - Ring colorsdivide- - Divider colorsdecoration-, accent-, caret-, outline- - Other color utilitiesfill-, stroke- - SVG colors
Usage
- Open any CSS file containing CSS custom properties
- Color squares will automatically appear in the gutter and inline for detected color variables and Tailwind classes
- Hover over a variable name, its value, or a
var(--name) usage to see the resolved color in a tooltip — with per-context swatches if .light/.dark contexts are defined
Multi-Context Support (Light/Dark Mode)
If your CSS has colors defined in different contexts:
.light {
--text-primary: 51 65 85; /* Dark text for light backgrounds */
}
.dark {
--text-primary: 226 232 240; /* Light text for dark backgrounds */
}
Switch between contexts:
- Press
Cmd+Shift+P
- Type "True Colors: Switch Color Mode"
- Select:
auto, light, dark, or any detected context
- All colors update instantly!
Or use Settings:
- Open Settings (
Cmd+,)
- Search "True Colors"
- Set Color Mode to your preferred context
The extension automatically detects ANY class-based contexts (.theme-blue, .mobile, .print, etc.)
File Type Selection
Control which file types receive decorations:
Command palette flow (recommended):
- Press
Cmd+Shift+P
- Run
True Colors: Switch File Types
- Toggle file types (
css, ts, tsx, js, jsx)
- Changes apply instantly
Settings flow:
- Open Settings (
Cmd+,)
- Search
trueColors.enabledLanguages
- Set a subset such as:
"trueColors.enabledLanguages": ["css", "tsx", "jsx"]
Supported values:
Decoration Style
Choose how color decorations are rendered next to your code:
highlight (default) — the entire token is filled with the color as its background, with contrasting text so it stays readable.patch — a small square color swatch appears inline before the token; the text itself stays completely unstyled.
Command palette flow (recommended):
- Press
Cmd+Shift+P
- Run
True Colors: Switch Decoration Style
- Pick
highlight or patch
- Style updates instantly across all open editors
Settings flow:
- Open Settings (
Cmd+,)
- Search
trueColors.decorationStyle
- Set the value:
"trueColors.decorationStyle": "patch"
Installation
From VSIX File
code --install-extension true-colors-0.0.4.vsix
Or via VSCode: Extensions → ... → Install from VSIX
From Source
- Clone or download this extension
- Run
npm install to install dependencies
- Run
npm run esbuild:prod to build with esbuild
- Run
npm run package to create the VSIX file
- Install the generated
.vsix file
Development
# Install dependencies
npm install
# Build with esbuild (development)
npm run esbuild
# Watch mode for development (auto-rebuild on changes)
npm run watch
# Build for production (minified)
npm run esbuild:prod
# Package extension for distribution
npm run package
# Test the extension
Press F5 in VSCode
Build System
This extension uses esbuild for fast, optimized bundling:
- ⚡ 600x faster builds compared to traditional TypeScript compilation
- 📦 85% smaller bundle size - from 140KB (12 files) to 20KB (1 file)
- 🌐 VSCode Web compatible - works on github.dev and vscode.dev
- 🔥 Hot reload - instant rebuilds during development
Contributing
Contributions are welcome! If you'd like to contribute:
- Fork the repository
- Create your feature branch (
git checkout -b feature/AmazingFeature)
- Commit your changes (
git commit -m 'Add some AmazingFeature')
- Push to the branch (
git push origin feature/AmazingFeature)
- Open a Pull Request
Issues & Feature Requests
Found a bug or have a feature request? Please open an issue on GitHub.
Support
If you find this extension helpful, please:
Author
Aryak Lahane
License
MIT - see LICENSE file for details
