Themes

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 --space property, which you can change from sRGB to mix colors in different color spaces. You can use colors in any format you want.

src/base/theme/default.css

:root, :host {
  --space: sRGB;
  --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(--space), var(--color-main) 75%, var(--color-main-foreground));
  --color-main-tertiary: color-mix(in var(--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(--space), var(--color-body) 95%, var(--color-body-foreground));
  --color-body-tertiary: color-mix(in var(--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 */
}

Default P3

src/base/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/base/theme/dark.css

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

Compatibility

Since support for color-mixis not that great yet, you can still use rgb if you enable it in the Config. In that case you have to use rgb variants for theming in your own components.

• src/base/theme/default-rgb.css
• src/base/theme/dark-rgb.css

For even better compatibility we plan to create a postcss-color-mix-rgb polyfill in the future which would rewrite the color-mix to rgb variants.