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 v4

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

tailwindcss/theme/default.css

TailwindCSS v3

src/theme/default.css

:root, :host {
  --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 */
}

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

Compatibility

Support for color-mix is almost 90% global usage. But if you want better compatibility you can still use rgb which can be enabled it in the Config (only for TailwindCSS v3). In that case, you have to use rgb variants for theming in your own components.

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