Home Assistant Theme Color Highlighter

A VSCode/Cursor extension that highlights RGB/RGBA color values in Home Assistant theme YAML files with inline color previews and navigation links.

Features

• Inline Color Previews: Displays colored squares next to RGB/RGBA color definitions and references
• Variable Navigation: Click on color previews or variable references to navigate to their definitions
• RGBA Support: Shows both RGB and RGBA previews for rgba() definitions
• Smart Detection: Automatically detects and highlights colors regardless of variable naming conventions
• Tooltips: Hover over variables to see their resolved color values
• Works with: Direct RGB values, var() references, rgb() calls, and rgba() calls

Usage

1. Open a Home Assistant theme YAML file
2. The extension will automatically detect RGB color values in the format:

   primary-background-color-str: 4, 23, 52
   

3. A colored marker will appear next to the RGB value
4. When you reference this variable elsewhere:

   secondary-background-color-str: var(--primary-background-color-str)
   

   The same color marker will appear next to the reference

Installation

From Source

1. Clone this repository
2. Run npm install to install dependencies
3. Run npm run compile to build the extension
4. Press F5 in VSCode/Cursor to open a new window with the extension loaded
5. Or package it using vsce package and install the .vsix file

Development

• npm run compile - Compile TypeScript
• npm run watch - Watch for changes and recompile

Requirements

• VSCode or Cursor version 1.74.0 or higher