defineTokens

defineTokens is a method for defining CSS variables for each theme.

Usage

Import

import { css } from '@plumeria/core'

Define Tokens

Define the tokens using css.defineTokens.

export const theme = css.defineTokens({
  colors: {
    default: 'black',
    dark: 'white'
  },
  bg: {
    default: 'white',
    dark: 'black'
  }
})

This will generate the following CSS

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

Using Themes

To use themes, you need to add the data-theme attribute to the root element.

<html data-theme="dark">
  <body>
    ...
  </body>
</html>

Media Queries

defineTokens can also be used with media queries.

export const theme = css.defineTokens({
  colors: {
    default: 'black',
    dark: 'white',
    '@media (prefers-color-scheme: dark)': 'white'
  }
})