On this page

theme

Just like traditional CSS, you can set the theme at the root using the data attribute.

Write theme and compile

You'll notice that the root is converted directly to :root and the &selector is added as an attribute.

global.ts

elter.root({
  "&[data-theme='dark']":  {
    '--color-text': '#e0e0e0',
    '--color-bg': '#121212',
  },
 
  "&[data-theme='light']": {
    '--color-text': '121212',
    '--color-bg': '#ffffff',
  }
 
  "&[data-theme='custom']": {
    '--color-text': '#ff5722',
    '--color-bg': '#f5f5f5',
  }
})