invert-css-variables

Convert CSS variable colors in bulk.

Table of Contents

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

Features

Simplify the process of converting your Dark/Light themes by inverting your CSS variables in bulk. Maintains the variable names and spacing, and supports all of the color formats in CSS even if they are mixed.

Installation

To install invert-css via NPM:

npm i invert-css

Usage

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;
`;
*/

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

Testing

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

npm run test

Todo

• Make available in a simple web interface

License

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