/shadcn-hsl-preview

shadcn HSL Preview extension for Visual Studio Code

Primary LanguageTypeScriptMIT LicenseMIT

shadcn HSL Preview

Overview

The shadcn HSL Preview extension for Visual Studio Code provides a simple color preview feature for the shadcn syntax for HSL in CSS files. It enhances your coding experience by displaying a live preview of colors defined using the shadcn syntax directly in your CSS files.

Features

  • Does what it says on the box: Provides a preview of HSL colors defined using the shadcn css variable syntax in CSS files.

Usage

  1. Install the extension from the Visual Studio Code Marketplace.
  2. Open a CSS file containing HSL color declarations using the shadcn css variable syntax.
  3. As you use HSL color values, the color preview will update automatically.

Example

Example

Example 2

More color information on hover of the variable.

Requirements

  • Visual Studio Code version 1.88.0 or higher.

Issues and Feedback

If you encounter any issues or have feedback for the shadcn HSL Preview extension, open an issue on GitHub.

License

This extension is licensed under the MIT License.

VSCode Theme Used in examples