Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/n3ps/css-variables-helpers
Helpers to get, and set, and toggle CSS Variables (aka CSS Custom Properties)
https://github.com/n3ps/css-variables-helpers
css-custom-properties css-variables
Last synced: 17 days ago
JSON representation
Helpers to get, and set, and toggle CSS Variables (aka CSS Custom Properties)
- Host: GitHub
- URL: https://github.com/n3ps/css-variables-helpers
- Owner: n3ps
- Created: 2020-05-29T21:26:29.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2023-03-06T05:26:31.000Z (almost 2 years ago)
- Last Synced: 2024-11-18T21:05:47.273Z (about 2 months ago)
- Topics: css-custom-properties, css-variables
- Language: JavaScript
- Size: 222 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# css-variables-helpers
Helpers to get, and set, and toggle CSS Variables (aka CSS Custom Properties) in JavaScript
## Install
```sh
$ npm install css-variables-helpers
```
## Usage
```js
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`.