On this page

Theme

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

global.css.ts

cssx.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',
}
})

Compiled attribute

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

css

:root[data-theme='dark'] {
  --color-text: #e0e0e0;
  --color-bg: #121212;
}
 
:root[data-theme='light'] {
  --color-text: #121212;
  --color-bg: #ffffff;
}
 
:root[data-theme='custom'] {
  --color-text: #ff5722;
  --color-bg: #f5f5f5;
}