Theme-custom-properties NPM

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

css variables custom properties themes dark mode

@infinitebrahmanuniverse/nolb-them @everything-registry/sub-chunk-2935

1.0.0

5 years ago

0.1.0

5 years ago