defineTheme

The defineTheme function allows you to define semantic design tokens that respond to themes such as "light" or "dark", and can optionally fall back to a default value.

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 if used via css.media or css.container

🎯 Basic usage

Define tokens with theme-aware values.

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 "./colors"
 
const styles = css.create({
  text: {
    color: theme.textPrimary,
    background: theme.bgPrimary,
  }
});

📦 Output summary

Plumeria will generate:

• var(--token-name) references in CSS
• Theme-specific overrides in data attributes
• (Optional) integration with css.media or css.container This allows for light/dark mode switching, theming via props, and custom container queries.

💡 Tips

• Use together with defineVars() to separate tokens from themes
• Themes are resolved at runtime via the data-theme attribute
• You can dynamically switch themes by toggling document.documentElement.dataset.theme = 'dark'

📚 Related APIs

• defineVars() — define base variables to reuse in themes
• create() — style components using theme tokens