Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/kamikillerto/vscode-colorize
A vscode extension to help visualize css colors in files
https://github.com/kamikillerto/vscode-colorize
color-highlighter typescript vscode-extension
Last synced: 6 days ago
JSON representation
A vscode extension to help visualize css colors in files
- Host: GitHub
- URL: https://github.com/kamikillerto/vscode-colorize
- Owner: KamiKillertO
- License: apache-2.0
- Created: 2016-12-28T20:00:47.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2025-01-16T04:03:29.000Z (17 days ago)
- Last Synced: 2025-01-20T01:06:01.324Z (13 days ago)
- Topics: color-highlighter, typescript, vscode-extension
- Language: TypeScript
- Homepage:
- Size: 12.5 MB
- Stars: 277
- Watchers: 4
- Forks: 37
- Open Issues: 42
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# **Colorize** [Looking for maintainers]
[](https://codebeat.co/projects/github-com-kamikillerto-vscode-colorize)
[](https://travis-ci.org/KamiKillertO/vscode-colorize)
[](https://ci.appveyor.com/project/KamiKillertO/vscode-colorize/branch/develop)
[](https://github.com/KamiKillertO/vscode_colorize)
[](https://raw.githubusercontent.com/kamikillerto/vscode-colorize/master/LICENSE)
Instantly visualize css colors in your css/sass/less/postcss/stylus/XML... files.
This extension your styles files looking for colors and generate a colored background (using the color) for each of them.
💡 [How to enable variables support](#colorizecolorized_variables)
## Features
- Generate colored background for
- css variables
- preprocessor variables
- hsl/hsla colors
- cross browsers colors (_red, blue, green..._)
- css hexa color
- rgb/rgba color
- argb color
- Color background live update
## Options (settings)
The following Visual Studio Code settings are available for the Colorize extension.
These can be set in user preferences `(cmd+,)` or workspace settings `(.vscode/settings.json)`.
### colorize.languages _ARRAY_
Configure a list of languages that should be colorized. You can learn about languages at .
For example, if you want to colorize colors in `javascript` files, you just need to include it:
```json
"colorize.languages": [
"javascript",
// ...
]
```
### colorize.enable_search_variables _BOOLEAN default: true_
By default colorize read and parse all files, in your workspace, that are targeted by the settings [colorize.languages](#colorizelanguages), [colorize.include](#colorizeinclude), and [colorize.exlude](#colorizeexclude) to extract 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 slown down vscode at opening_
### colorize.include
Configure glob patterns for including files and folders. By default Colorize is enable for files matching one the languages defined in the `colorize.languages` config, with this config you can enable colorize for other files or folders. Read more about glob patterns [here](https://code.visualstudio.com/docs/editor/codebasics#_advanced-search-options).
### colorize.exclude
Configure glob patterns for excluding files and folders. Colorize will not colorized colors in these files and folders and it'll also not search for variables inside. Read more about glob patterns [here](https://code.visualstudio.com/docs/editor/codebasics#_advanced-search-options).
### colorize.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.
### colorize.decoration_type _STRING default: "background"_
Defines the type of decoration to use. The possible values are:
background
underline
outline
dot
square-dot
### colorize.colorized_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](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hsl)
- `BROWSERS_COLORS`: for native browser's colors like `white`, `red`, `blue`...
- `OKLAB`: for [oklab colors](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/oklab)
- `OKLCH`: for [oklch colors](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/oklch)
For example, if you want to only colorize hexa colors (`#fff, #ffffff, 0xFFF`) in your files you can update the option like this :
```json
"colorize.colorized_colors": [
"HEXA"
]
```
### colorize.colorized_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
```json
"colorize.colorized_variables": [
"LESS"
]
```
_This way all @variables will be colorized_
## Roadmap
- [x] Generate background for hexa colors
- [x] Update background on color updates
- [x] Generate background for rgb colors
- [x] Generate background for rgba colors
- [x] Generate background for hsl colors
- [x] Generate background for hsla colors
- [x] Generate background for Predefined/Cross-browser colors
- [x] Generate background for preprocessor variables
- [x] Generate background for css variables
- [x] Config livereload
## Release
See [CHANGELOG](CHANGELOG.md) for more information.
## Contributing
Bugs, feature requests and more are welcome here [GitHub Issues](https://github.com/KamiKillertO/vscode-colorize/issues).