Theme

Theming in Winduum is really easy. All it takes is a few CSS properties. There are two themes by default (light and dark) and to create a new one, you can just extend the default theme.

Default

Each color-mix function also contains --default-color-space property, which you can change from sRGB to mix colors in different color spaces. You can use colors in any format you want.

TailwindCSS

Instead of :root, :host the @theme at-rule is used.

tailwindcss/theme/default.css

@theme {
  --default-color-space: srgb;
  --default-color-scheme: light;
  --color-accent: var(--color-primary);
  --color-accent-foreground: var(--color-primary-foreground);
  --color-primary: #3b82f6; /* color.blue.500 */
  --color-primary-foreground: var(--color-light);
  --color-main: #171717; /* color.neutral.900 */
  --color-main-foreground: var(--color-body);
  --color-main-primary: var(--color-main);
  --color-main-secondary: color-mix(in var(--default-color-space), var(--color-main) 75%, var(--color-main-foreground));
  --color-main-tertiary: color-mix(in var(--default-color-space), var(--color-main) 50%, var(--color-main-foreground));
  --color-body: #fff; /* color.white */
  --color-body-foreground: var(--color-main);
  --color-body-primary: var(--color-body);
  --color-body-secondary: color-mix(in var(--default-color-space), var(--color-body) 95%, var(--color-body-foreground));
  --color-body-tertiary: color-mix(in var(--default-color-space), var(--color-body) 90%, var(--color-body-foreground));
  --color-light: #fff; /* color.white */
  --color-light-foreground: var(--color-dark);
  --color-dark: #171717; /* color.neutral.900 */
  --color-dark-foreground: var(--color-light);
  --color-success: #16a34a; /* color.green.600 */
  --color-error: #dc2626; /* color.red.600 */
  --color-warning: #eab308; /* color.yellow.500 */
  --color-info: #0ea5e9; /* color.sky.500 */
}

Without TailwindCSS

src/theme/default.css

Default P3

src/theme/default-p3.css

Better high range colors for P3 capable displays.

:root,
:host {
  @media (color-gamut: p3) {
    --color-primary: color(display-p3 0.23 0.51 0.96);
    --color-main: color(display-p3 0.09 0.09 0.09);
    --color-body: color(display-p3 1 1 1);
    --color-light: color(display-p3 1 1 1);
    --color-dark: color(display-p3 0.09 0.09 0.09);
    --color-success: color(display-p3 0.09 0.64 0.29);
    --color-error: color(display-p3 0.86 0.15 0.15);
    --color-warning: color(display-p3 0.92 0.7 0.03);
    --color-info: color(display-p3 0.05 0.65 0.91);
  }
}

Dark

src/theme/dark.css

:root.dark,
:host.dark {
  --default-color-scheme: dark;
  --color-main: var(--color-light);
  --color-body: var(--color-dark);
}