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 in your own components.

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.

Released under the MIT License.