Custom Property Themes

project based on theming-with-custom-properties

Library that takes a list theme and returns

  • a transformed theme that refers to CSS variables
  • CSS to add to the page that create the custom variables

It can also take a bunch of themes keyed by color mode and create the css for that.

const themes = {
  light: {
    fg: "black",
    bg: "white"
  },
  dark; {
    fg: "white",
    bg: "black"
  }
}

const defaultColorMode = "dark";
const {transformedThemes, css} convertThemes(defaultColorMode, themes);

transformedThemes
// =>
{
  light: {
    fg: "var(--fg)",
    bg: "var(--bg)"
  },
  dark; {
    fg: "var(--fg)",
    bg: "var(--bg)"
  }
}

css
// =>
:root {
  --fg: "white";
  --bg: "black";
}

[data-theme="dark"]: {
  --fg: "white";
  --bg: "black";
}

[data-theme="light"]: {
  --fg: "black";
  --bg: "white";
}

tags: web

Last Updated February 27, 2021