theme-custom-properties
Convert a theme object to CSS custom properties (variables) and CSS that you can add to your website.
import { transformThemeToCustomProperties } from "theme-custom-properties";
const { bodyCSS, transformedTheme } = transformThemeToCustomProperties({
light: {
colors: {
foreground: "black",
background: "white"
}
},
dark: {
colors: {
foreground: "white",
background: "black"
}
}
});
console.log(bodyCSS);
/*
:root {
--colors-foreground: "black";
--colors-background: "white";
}
[data-theme="light"] {
--colors-foreground: "black";
--colors-background: "white";
}
[data-theme="dark"] {
--colors-foreground: "black";
--colors-background: "white";
}
*/
console.log(transformedTheme)
/*
{
light: {
colors: {
foreground: "var(--colors-foreground)",
background: "var(--colors-background)"
}
},
dark: {
colors: {
foreground: "var(--colors-foreground)",
background: "var(--colors-background)"
}
}
}
*/Install
yarn add theme-custom-properties
# or
npm i --save theme-custom-properties
Usage
Convert your themes
import { transformThemeToCustomProperties } from "theme-custom-properties";
const { bodyCSS, transformedThemes } = transformThemeToCustomProperties({
light: { /* ... */ },
dark: { /* ... */ }
});Add the bodyCSS to the document and pass the transformed theme to your ThemeProvider (e.g. styled-components. Get the currently selected theme from something like next-themes.
For example, with NextJS.
const MyApp = ({ Component, pageProps }: AppProps) => {
const currentTheme = "dark"
return (
<ThemeProvider theme={transformedThemes[currentTheme]}>
<Head>
<style>{bodyCSS}</style>
</Head>
<Component {...pageProps} />
</ThemeProvider>
)Now you can use your theme and it will use CSS variables instead.
API
transformThemeToCustomProperties(themes, options?) => { bodyCSS, transformedThemes }
-
themes: Themes for all colors modes. e.g.
const themes = {
light: { /* ... */ },
dark: { /* ... */ },
}-
options-
defaultTheme = "light": The default color mode.themes[defaultTheme]will be added to:rootinbodyCSS -
attribute = "data-theme": HTML attribute modified based on the active theme. Accepts class and data-*
-
Returns
-
bodyCSS: string containing CSS custom properties that you can add to the HTML document -
transformedThemes: object in same shape asthemes. Values are replaced with CSS variable string
Development
This library was bootstrapped with tsdx.
Build
yarn build
Test
yarn test