n3ps / css-variables-helpers

Helpers to get, and set, and toggle CSS Variables (aka CSS Custom Properties)

css-variables-helpers

Helpers to get, and set, and toggle CSS Variables (aka CSS Custom Properties) in JavaScript

Install

$ npm install css-variables-helpers

Usage

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

API

get (variable, [element])

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.

set (variable, [element])

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.

toggle (variable, valuesArray, [element])

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.