Package Exports

theme-custom-properties

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (theme-custom-properties) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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