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 :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