dynamic-css-properties
CSS custom properties made dynamic.
Last updated 3 years ago by haukur .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install dynamic-css-properties 
SYNC missed versions from official npm registry.

dynamic-css-properties

This tiny library exposes a single function in order to dynamically set custom CSS properties (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 document.documentElement, i.e. 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:

import setCustomProperties from 'dynamic-css-properties';

CommonJS:

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

Script tag (adds a setCustomProperties global):

<script src="https://unpkg.com/dynamic-css-properties@0.1.1/dist/dynamic-css-properties.min.js"></script>

Using the library

A minimal example:

setCustomProperties({
  primaryTextColor: 'hotpink',
  backgroundColor: 'papayawhip',
});

Now simply use the variables:

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.

Current Tags

  • 0.1.2                                ...           latest (3 years ago)

3 Versions

  • 0.1.2                                ...           3 years ago
  • 0.1.1                                ...           3 years ago
  • 0.1.0                                ...           3 years ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 2
Dependencies (0)
None
Dev Dependencies (12)
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |