createTheme

export type createTheme = <const T extends CreateTheme>(rule: T)=> ReturnVariableType<T>;
export const createTheme: createTheme;

createTheme for defining global CSS variables for each theme.
This is shared globally, so care must be taken to ensure it does not conflict with global.css variable.

Example

import * as style from '@plumeria/core'

export const theme = style.createTheme({
  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

createTheme can also be used with media queries.

export const theme = style.createTheme({
  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

All APIs, including createTheme, are not compiled until the variable is used.

createTheme

Example

Using Themes

Media Queries

On this page