https://github.com/hph/dynamic-css-properties

A tiny utility to update custom CSS properties on the fly. Think "theming"!
https://github.com/hph/dynamic-css-properties

css css-in-js css-variables

Last synced: 10 days ago
JSON representation

A tiny utility to update custom CSS properties on the fly. Think "theming"!

• Host: GitHub
• URL: https://github.com/hph/dynamic-css-properties
• Owner: hph
• Created: 2017-05-21T13:03:52.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2017-05-21T13:36:40.000Z (over 7 years ago)
• Last Synced: 2024-10-20T10:01:24.564Z (18 days ago)
• Topics: css, css-in-js, css-variables
• Language: JavaScript
• Homepage: https://codepen.io/haukurpallh/pen/pwogOp
• Size: 46.9 KB
• Stars: 2
• Watchers: 3
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
dynamic-css-properties

======================

This tiny library exposes a single function in order to dynamically set custom

CSS properties ([CSS variables](https://www.w3.org/TR/css-variables/)).

### Features

- Simple API – takes an object of properties and values to update and

  automatically converts `camelCased` property names to `--kebab-case` for you.

- Defaults to writing the properties to `document.documentElement` (the root

  node) but allows you to specify a subnode to update instead (custom CSS

  properties follow the standard cascading rules).

- It doesn't do much, but it still feels like magic!

### Install

    yarn add dynamic-css-properties

### Usage

#### Importing the library

ES6 modules:

```javascript

import setCustomProperties from 'dynamic-css-properties';

```

CommonJS:

```javascript

const setCustomProperties = require('dynamic-css-properties');

```

Script tag (adds a `setCustomProperties` global):

```html

```

#### Using the library

A minimal example:

```javascript

setCustomProperties({

  primaryTextColor: 'hotpink',

  backgroundColor: 'papayawhip',

});

```

Now simply use the variables:

```css

body {

  color: var(--primary-text-color, #1e1e1e);

  background-color: var(--background-color, #fff);

}

```

As soon as the code is executed, the custom properties will be added to the

document. Should you wish to only update part of the document you may specify a

particular node as the second argument, and only it and its children will be

affected.

### Caveat

Using this for serious business is not a good idea, unless you know that all

your users are running browsers or environments (such as Electron) that support

custom CSS properties. See [here](http://caniuse.com/#feat=css-variables).