Skip to content


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.


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.


:root, :host {
  --space: sRGB;
  --scheme: light;
  --color-accent: var(--color-primary);
  --color-accent-foreground: var(--color-primary-foreground);
  --color-primary: #3b82f6; /* */
  --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-error: #dc2626; /* */
  --color-warning: #eab308; /* color.yellow.500 */
  --color-info: #0ea5e9; /* */

Default P3


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);



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


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.

If you prefer compatibility then some of the components include -rgb.css fallback (where color-mix is not used). So it's recommended to also include winduum/main-rgb.css in your project for old browsers. You can add it like this, so it's only used for browsers that does not support color-mix:

@import "winduum/src/main-rgb.css" supports(not (color: color-mix(in srgb, red 0%, red)));

Released under the MIT License.