small, dependency-free utility to enable efficient theming with css variables.
A small, dependency-free utility to enable efficient theming with css variables.
npm i css-var-theme
A theme is basically a JS object implementing the Theme
interface:
export interface Theme {
meta?: object
theme: object
}
It contains optional meta
information (like a name) and the actual theme
which can be any JS object.
Once a theme is defined the css-var-theme
utility can be initialized with it:
import { useTheme } from 'css-var-theme'
const my_theme = {
meta: {
name: 'my theme',
},
theme: {
color: {
background: '#eee',
text: '#333',
},
},
}
const theme_store = useTheme({ initial: my_theme })
During initialization a <style>
-Tag is added to the head which will map this theme to the following css-variables:
:root {
--color-background: #eee;
--color-text: #333;
}
with theme_store.set(new_theme)
the current theme can be changed and theme_store.subscribe(() => ...)
you can subscribe to updates on the theme.
The useTheme
function consumes an object implementing the ThemingOptions
interface: