https://github.com/chaseottofy/invert-css-variables-ui
UI to convert CSS variable colors in bulk.
https://github.com/chaseottofy/invert-css-variables-ui
color-conversion css css-utilities design-tool invert-color invert-colors invert-css invert-css-variables invert-css-vars ui-tool
Last synced: 2 months ago
JSON representation
UI to convert CSS variable colors in bulk.
- Host: GitHub
- URL: https://github.com/chaseottofy/invert-css-variables-ui
- Owner: chaseottofy
- Created: 2023-11-01T06:49:41.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2023-11-01T07:11:33.000Z (over 1 year ago)
- Last Synced: 2025-02-09T05:16:57.675Z (4 months ago)
- Topics: color-conversion, css, css-utilities, design-tool, invert-color, invert-colors, invert-css, invert-css-variables, invert-css-vars, ui-tool
- Language: CSS
- Homepage: https://chaseottofy.github.io/invert-css-variables-ui/
- Size: 74.2 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# invert-css-variables-ui
A simple UI to bulk invert CSS variables.
Good for creating light/dark themes - just invert the colors and you're more than likely halfway there.
- Uses [@invert-css](https://www.npmjs.com/package/invert-css), a package I made to invert the variables.
## Usage
Example input:
```bash
--accent-1: #111;
--accent-2: rgb(255,170,204);
--accent-3: hsl(340,100%,88%);
--accent-4: #FFFFFF;
```
Example output:
```
--accent-1: #eeeeee;
--accent-2: rgb(0,85,51);
--accent-3: hsl(160,100%,88%);
--accent-4: #000000;
```
- Invalid CSS variables/input will just output the invalid input. A console error will be logged.
## Features
- Maintains the variable names and output will have proper spacing.
- Copy to clipboard.
### Supported Color Formats
- Hex (both short `#123` and long `#112233` formats)
- RGB (`rgb(255,255,255)`)
- RGBA (`rgba(255,255,255,0.5)`)
- HSL (`hsl(120,100%,50%)`)
- HSLA (`hsla(120,100%,50%,0.5)`)