💅 Styled-Colors

Effortlessly visualize CSS colors in your JavaScript, TypeScript, and other source files. This extension is designed to work excellently with styled-components, dynamically generating a colored underline for your color specifications. The underline can be customized to appear as a background color through settings.

🌈 Key Features

🖥️ Support for source files like JavaScript and TypeScript.
💅 Ideal for working with styled-components.
👵👶 Support for both modern and legacy CSS color syntax. This includes:
- 🌈 RGB: rgb(0, 0, 0), rgb(0 0 0), rgba(12, 122, 231, 0.2), rgb(12 122 231 / 0.2)
- 🌐 HSL: hsl(.75turn, 60%, 70%), hsla(270, 60%, 50%, 15%), hsl(270 60% 50% / 15%), hsl(.75turn 60% 70%)
🖍️ Display of colors is done through an underline by default but can be set to background through settings.
🔄 Live color background updates.
🌎 Comprehensive color support, including:
- 🎨 CSS variables
- 📦 Preprocessor variables
- 🌍 Cross-browser colors (e.g., red, blue, green...)
- 🔢 CSS hexadecimal color
- 💡 RGB/RGBA color
- 🅰️ ARGB color

⚙️ Options (settings)

The following Visual Studio Code settings are available for the Styled-Colors extension. These can be set in user preferences (cmd+,) or workspace settings (.vscode/settings.json).

🗣 styled-colors.languages ARRAY

Configure a list of languages that should be styled. You can learn more about languages at https://code.visualstudio.com/docs/languages/overview.

If you want to add more languages, for example, if you want styled-colors colors in python files, you just need to include it:

  "styled-colors.languages": [
    "python",
    // ...
  ]

📝 Note: "Javascript", "Typescript", "Javascriptreact", and "Typescriptreact" are already included by default.

🔍 styled-colors.enable_search_variables BOOLEAN default: true

By default, Styled-Colors read and parse all files in your workspace that are targeted by the settings styled-colors.languages, styled-colors.include, and styled-colors.exclude to extract all variables. Thanks to this behavior, all variables will have colored background even if you never open the file containing the declaration. ⚠️ This setting can slow down VS Code at opening

📚 colorize.include

Configure glob patterns for including files and folders. By default, Styled-Colors is enabled for files matching one of the languages defined in the styled-colors.languages config. With this config, you can enable Styled-Colors for other files or folders. Read more about glob patterns here.

❌ styled-colors.exclude

Configure glob patterns for excluding files and folders. Styled-Colors will not colorize colors in these files and folders and it'll also not search for variables inside. Read more about glob patterns here.

👀 styled-colors.hide_current_line_decorations BOOLEAN default: true

By default, decorations for the current line are hidden. Set this setting to false if you want to deactivate this behavior.

🎨 styled-colors.styled_colors ARRAY

This options allow you to enable/disable colorization for a type of colors.

Available colors are :

💎 HEXA: for hexadecimal colors: #RGB, #RGBA, #RRGGBB, #RRGGBBAA, 0xRGB, 0xRGBA, 0xRRGGBB or 0xRRGGBBAA
🎨 ARGB: for argb colors: #RGB, #ARGB, #RRGGBB or #AARRGGBB
🔴 RGB: for rgb colors: rgb(r,g,b) or rgba(r,g,b,a)
🌈 HSL: for HSL colors: hsl(h,s,l) or hsla(h,s,l,a)
🌐 BROWSERS_COLORS: for native browser's colors like white, red, blue...

For example, if you want to only styled-colors hexa colors (#fff, #ffffff, 0xFFF) in your files you can update the option like this :

  "styled-colors.styled_colors": [
    "HEXA"
  ]

🎨 styled-colors.styled_variables

This options allow you to enable/disable colorization for a type of variables.

For example if you use less in your project you setup the option like this

  "styled-colors.styled_variables": [
    "LESS"
  ]

This way all @variables will be styled

styled-colors

nyxb