@ngdangtu/jss-plugin-theme

JSS Plugin Scheme

This plugin is made on the idea "If I can get one variable and turn it to many value for various scheme".

What is scheme

A scheme, or website theme or website skin, is (mostly) a set of color. We change scheme and the website changes its color which is effect on user experience of the site. The most noble example case is the dark & light scheme.

A glance

Look at the sample code first:

Config:

export {
	registry: {
		dark: {
			main: {
				on: '#EEE',
				bg: '#333'
			}
			link: 'yellow'
		},
		light: {
			main: {
				on: '#111',
				bg: '#EEE'
			}
		}
	}
}

Before:

const styles = {
	body: {
		'background-color': 'theme:main.bg'
	},
	a: {
		color: 't:link'
	}
}

After:

#dark {
	background-color: #333;
}
#light {
	background-color: #EEE;
}
#dark a {
	color: yellow
}

In short, you will give the plugin a list of theme variables. And the plugin will generate theme selectors base on the list and URI you provided.

How-to topic

Installation

It is JSS plugin. So all we need is install it and import it. BEWARE! Plugin order matter, please place it before any plugin that modify CSS rule, property, value, etc... For some exapmle, camel-case, default-unit. In short, let's just put it before of almost everything except plugin-nested.

Install:

npm i @ngdangtu/jss-plugin-scheme

To add it to JSS, see JSS official document. An example of installing the plugin:

import pluginTheme from '@ngdangtu/jss-plugin-theme'

jss.use(pluginTheme({
	registry: {/* variables of fonts, colors, etc. */},
	wishlist: /* Not ready */,
	flag: /* Not ready */
}))

Usage

The minimun option is registry. It is your theme variables list. The list looks like this:

{
	'theme-name-1': {...variablesOne},
	'theme-name-2': {...variablesTwo}
}

To summon those variables in the stylesheet, use URI with schemes are t or theme. The URI path is separated by a dot .. Here is an URI sample:

theme:x.y.z

Which will access to:

{
	['theme_name']: {
		x: {
			y: {
				z: 'the value that will be get'
			}
		}
	}
}

... What a mess, I'll deal with it later ...