https://github.com/chickencoding123/css-colors-to-vars
Remap arbitrary CSS colors to CSS variables. Useful for libraries and custom CSS files.
https://github.com/chickencoding123/css-colors-to-vars
color css variables-css
Last synced: 8 months ago
JSON representation
Remap arbitrary CSS colors to CSS variables. Useful for libraries and custom CSS files.
- Host: GitHub
- URL: https://github.com/chickencoding123/css-colors-to-vars
- Owner: chickencoding123
- License: mit
- Created: 2021-12-16T18:39:07.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2022-04-18T09:37:27.000Z (about 4 years ago)
- Last Synced: 2025-09-15T09:29:27.732Z (9 months ago)
- Topics: color, css, variables-css
- Language: JavaScript
- Homepage:
- Size: 94.7 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
css-colors-to-vars
======
Remap arbitrary CSS colors to CSS variables. Useful for libraries and custom CSS files.
[](https://github.com/chickencoding123/css-colors-to-vars/blob/master/LICENSE) [](https://www.npmjs.com/package/css-colors-to-vars)
## Features
- Automatic name assignment for the newly created css variables
- Pretty fast in general
## How to use
```sh
npm i css-colors-to-vars
# or
yarn add css-colors-to-vars
```
To use the cli:
```sh
npx remap
# or
yarn remap
# e.g. npm run remap tests/fixtures/bootstrap-v5.0.2.css dist/bootstrap.css
```
To use the api:
```js
const remap = require('css-colors-to-vars')
// or
import remap from 'css-colors-to-vars'
// then
const output = remap('tests/fixtures/bootstrap-v5.0.2.css')
```
Both cli and api will give you a remaped version with all colors saved under the `:root`
## Why?
Because someone may find this useful. Perhaps accelarate their rewrite process when working on older CSS files. Maybe you love to use [Bootstrap](https://github.com/twbs/bootstrap), but need a greater control over the color theme because you'd want to allow your users to choose their own colors and save their preferences in their account.