Skip to content

Latest commit

 

History

History
41 lines (29 loc) · 967 Bytes

README.md

File metadata and controls

41 lines (29 loc) · 967 Bytes
Raw

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, a package I made to invert the variables.

Usage

Example input:

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