Theming

Basic usage

Download default.theme.css and modify it as you like. That’s it.

For example, the changes shown below will make elements look like the following:

:root {
  --sui-color-key-primary: #d1a443;
  --sui-color-on-key-primary: #3e2723;
  --sui-color-key-tertiary: rgba(209, 164, 67, 0.2);
  --sui-roundness-strong: 3px;
  /* Change other variables as needed */
}

Dark mode

The default CSS already includes dark mode settings.
Just use the standard media query:

@media (prefers-color-scheme: dark) {
  :root {
    /* Your dark mode variables here */
  }
}

Nesting themes

CSS variables support nested overrides, so you can switch themes within specific elements.