defineTheme

These tokens are automatically turned into CSS custom properties (i.e. --variables) and placed into:

• :root for defaults
• :root[data-theme="themeName"] for per-theme overrides
• or @media, @container selectors.

Example

Define tokens with theme-aware values.

// lib/theme.ts
import { css } from "@plumeria/core"
 
export const theme = css.defineTheme({
  textPrimary: {
    default: 'rgb(60,60,60)',
    light: 'black',
    dark: 'white',
  },
  bgPrimary: {
    light: 'white',
    dark: 'black',
  },
});

• If default is defined, it's written to :root
• Each theme name becomes :root[data-theme="name"]
• Keys are converted to kebab-case

Consuming themes in components

Use theme tokens in your components just like any other CSS variable.

import { css } from "@plumeria/core"
import { theme } from "lib/theme"
 
const styles = css.create({
  text: {
    color: theme.textPrimary,
    background: theme.bgPrimary,
  }
});

🔗 Related