Convert CSS variable colors in bulk. USE THE UI WEB TOOL INSTEAD

• Features
• Supported Color Formats
• Installation
• Usage
• Testing
• Todo
• License

Meant to be used with CSS variables. Simplify the process of converting your Dark/Light themes by inverting your CSS variables in bulk.

• Supports all of the color formats in CSS even if they are mixed.
• Maintains the variable names and output will have proper spacing.
• Written in TypeScript without any dependencies.

• 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))

To install invert-css via NPM:

npm i invert-css

import invert from 'invert-css'; const input = `  --accent-1: #111;  --accent-2: rgb(255,170,204);  --accent-3: hsl(340,100%,88%);  --accent-4: #FFFFFF; `; const result = invert(input); /* result = `  --accent-1: #eee;  --accent-2: rgb(0,85,51);  --accent-3: hsl(160,100%,88%);  --accent-4: #000000; `; */

Tests are written using Jest. Clone the repo and run the following command to run the tests:

npm run test 

• Make available in a simple web interface

This project is licensed under the MIT License - see the LICENSE.md file for details.