css.defineThemeVars

Create variables to be used in data-theme and media or container.

Write defineThemeVars and compile

If not nested, it will be written to :root.
If nested, default will be written to :root, and the rest will be put into data-theme as a string. In the case of media or container, it will be wrapped in a selector.

TypeScript

import { css } from "@plumeria/core"
 
export const colors = css.defineThemeVars({
  normal: "white",
  text_primary: {
    default: "rgb(60,60,60)",
    light: "black",
    dark: "white",
    [css.media.max("width: 700px")]: "gray",
  },
  bg_primary: {
    light: "white",
    dark: "black",
  },
});

TypeScript

import { css } from "@plumeria/core"
import { colors } from "./colors"
 
const colors = css.create({
  text: {
    color: colors.text_primary,
  }
});

css.defineThemeVars

Write defineThemeVars and compile

On this page