https://github.com/webreflection/css-proxied-vars

The easiest way to set, read, or update, CSS variables per each element.
https://github.com/webreflection/css-proxied-vars

Last synced: 5 months ago
JSON representation

The easiest way to set, read, or update, CSS variables per each element.

• Host: GitHub
• URL: https://github.com/webreflection/css-proxied-vars
• Owner: WebReflection
• License: isc
• Created: 2021-03-06T13:46:42.000Z (over 5 years ago)
• Default Branch: main
• Last Pushed: 2022-06-22T10:13:46.000Z (about 4 years ago)
• Last Synced: 2024-12-31T15:57:44.509Z (over 1 year ago)
• Language: JavaScript
• Size: 13.7 KB
• Stars: 49
• Watchers: 3
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# css-proxied-vars

**Social Media Photo by [Michael Dziedzic](https://unsplash.com/@lazycreekimages) on [Unsplash](https://unsplash.com/)**

The easiest way to set, read, or update, CSS properties and variables per each element.

**[Live Demo](https://codepen.io/WebReflection/pen/GRNXrEK?editors=0010)**

```js

import proxiedVars from 'css-proxied-vars';

// example => handle all :root CSS variables

const htmlStyle = proxiedVars(document.documentElement);

// or pseudo

// const pseudoStyle = proxiedVars(element, ':before');

// set CSS properties explicitly

htmlStyle.color = 'blue';

// get CSS properties explicitly (always computed)

htmlStyle.color; // rgb(0, 0, 255)

// set CSS variables explicitly

htmlStyle['--bg-color'] = 'green';

// get CSS variables explicitly (always computed)

htmlStyle['--bg-color']; // green

// iterate as key/value pairs

for (const [key, value] of htmlStyle) {

  console.log({ key, value });

  // { key: 'color', value: 'rgb(0, 0, 255)' }

  // { key: '--bg-color', value: 'green' }

}

// or apply a whole theme via import or literals

Object.assign(htmlStyle, {

  '--bg-color': 'red',

  'color': 'gray',

  '--other': 'value'

});

```