Helpers to get, and set, and toggle CSS Variables (aka CSS Custom Properties) in JavaScript
$ npm install css-variables-helpers
import { set, toggle } from 'css-variables-helpers'
// Toggle the :root '--container-width' between 100% and 900px
toggle('container-width', ['100%', '900px'])
// Set the value of :root '--base-font-size' to 16px
set('base-font-size', '16px')
// Set the value of '--primary-color' of an element to blue
set('primary-color', 'blue', document.querySelector('.btn'))
Returns the value of the CSS variable. If element is not provided, :root
is assumed.
variable
Type: String
Supports shorthand variable
or --my-variable
for convenience.
element
Type: DOMElement
Defaults to the root documentElement
.
Sets the value of the CSS variable. If element is not provided, :root
is assumed.
variable
Type: String
Supports shorthand variable
or --my-variable
for convenience.
element
Type: DOMElement
Defaults to the root documentElement
.
Toggles the value of the CSS variable between the array. If element is not provided, :root
is assumed.
variable
Type: String
Supports shorthand variable
or --my-variable
for convenience.
valuesArray
Type: Array
An array of string values to cycle through.
element
Type: DOMElement
Defaults to the root documentElement
.