Manipulate CSS Variables Per Each Element – css-proxied-vars

Preview:

Description:

css-proxied-vars is a JavaScript library that could be used to manipulate (get, set, update) CSS variables per each element.

How to use it:

1. Install and import the css-proxied-vars.

# NPM
$ npm i css-proxied-vars

import proxiedVars from 'css-proxied-vars';
// or explicit only variant
import proxiedVars from 'css-proxied-vars/explicit';

// or
import proxiedVars from '//unpkg.com/css-proxied-vars?module';

2. Handle all :root CSS variables.

:root {
  --bg-color: #fff;
  background-color: var(--bg-color);
}

const htmlCSSVars = proxiedVars(document.documentElement);

3. Read CSS variables.

htmlCSSVars.bgColor

4. Set CSS variables.

htmlCSSVars.bgColor = 'black';
// or
htmlCSSVars['--bg-color'] = 'red';