Small utility to define multiple themes using CSS variables
NB: This is an experimental micro-utility.
Define a theme using createTheme
(1), then inject the config it generates into your project's Tailwind config (2).
// tailwind.config.js
const { createTheme } = require('@rstacruz/tailwind-variable-theming')
const { colors } = require('tailwindcss/defaultTheme')
// Define a theme [1]
const theme = createTheme({
name: 'default',
colors: {
base: {
bodyBg: colors.white,
bodyText: colors.gray['900'],
},
input: {
baseBg: colors.gray['100'],
baseText: colors.gray['900'],
},
},
})
// Include the variables and the plugin to your Tailwind config [1]
module.exports = {
theme: {
extend: {
colors: {
...theme.config.colors,
},
},
},
variants: {},
plugins: [theme.plugin],
}
The plugin creates a utility which can be loaded onto :root
.
:root {
@apply theme-default;
}
The config object (theme.config.colors
) will define colors as CSS variables. This follows what Tailwind would recommend for switching themes (docs).
.box {
background: theme('colors.base.bodyBg');
}
.box {
background: var(--base-body-bg);
}
.paragraph {
@apply text-base-bodyBg;
}
.paragraph {
color: var(--base-body-bg);
}
The plugin (theme.plugin
) will create a utility to define those variables, which can be used in :root
via @apply.
:root {
@apply theme-default;
}
:root {
--base-body-bg: #fff;
--base-body-text: #1a202c;
--input-body-bg: #f7fafc;
--input-body-text: #1a202c;
}
Two themes can be defined for default
and dark
themes.
// Define themes
const defaultTheme = createTheme({
name: 'default',
colors: {
/*...*/
},
})
const darkTheme = createTheme({
name: 'dark',
colors: {
/*...*/
},
})
// Include the variables and the plugin to your Tailwind config
module.exports = {
theme: {
extend: {
colors: {
// Only one will be needed here
...defaultTheme.config.colors,
},
},
},
variants: {},
plugins: [defaultTheme.plugin, darkTheme.plugin],
}
CSS media queries can be used to define an alternate theme.
:root {
@apply theme-default;
@media (prefers-color-scheme: dark) {
@apply theme-dark;
}
}
MIT