theme-custom-properties

!CI

Convert a theme object to CSS custom properties (variables) and CSS that you can add to your website.

``ts
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

`ts
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.

`tsx
const MyApp = ({ Component, pageProps }: AppProps) => {
const currentTheme = "dark"
return (






)
`

Now you can use your theme and it will use CSS variables instead.

API

$3

- themes: Themes for all colors modes.
e.g.
`ts
const themes = {
light: { / ... / },
dark: { / ... / },
}
`

- options
* defaultTheme = "light": The default color mode. themes[defaultTheme] will be added to :root in bodyCSS
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 as themes. Values are replaced with CSS variable string

Development

This library was bootstrapped with tsdx.

Build

`
yarn build
`

Test

`
yarn test
``