Skip to content

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

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.

css
: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

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.

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:

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

Released under the MIT License.