defineTokens

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

Example

import { css } from '@plumeria/core'
 
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'
  }
})

This will generate the following CSS

:root {
  --colors: black;
}
 
[data-theme="dark"] {
  --colors: white;
}
 
@media (prefers-color-scheme: dark) {
  :root {
    --colors: white;
  }
}

Good to know

defineTokens is not compiled until the variable is used.

defineTokens

Example

Using Themes

Media Queries

On this page