Themes

Windstorm comes with 3 pre-built themes: Light, Dark, and Tron.

The light and dark themes are tuned for normal people, while the tron theme is a high contrast theme that only a handful of people will like (me).

Custom Theme

To create a custom theme, a single css rule needs to be defined with a number of variables that windstorm uses in the components and functions.

The selector should be: [ws-x~="@@theme:<theme name>"]

Theme Properties

Windstorm uses css custom properties (css variables) to control a number of aspects of the styles without the need for js.

Text Display

The text proprties control the size, color, and font of the text on the page.

--font
Default font for the page
--text-light
Text color that should be on the lighter side of colors
--text-dark
Text color that should be on the darker side of colors
--text-color-normal
Default color for text on the page
--text-color-secondary
Color of text that is used in things like subtitles
--text-color-invert
The invert of the normal text color
--text-color-fill
Text color to use when an element has a background color
--text-size-normal
Default text size
--text-size-title
Text size in titles
--text-size-header
Text size for section headers
--text-size-info
Text size for informational text, like badges
--text-size-subtitle
Text size for subtitles

Page/Component Styles

These variables control the overall look and feel of the components in multiple states, as well as the page itself.

--background
Background color of the page
--background-layer
Background color of layered containers, like paper
--background-element
Background color of elements that take input, like labeled input tags
--layer-border-width
Border width for layered containers
--layer-border-color
Border color for layered containers that dont specificy a color
--ripple-normal
The default ripple color for elements that have the effect
--shadow-color
The color of the shadow on layered containers
--disabled-background
The background color for elments that are disabled (inputs, buttons, etc.)
color-scheme Optional
For dark themes, set this to dark as a reliable, cross-browser solution to the coloration of things like scrollbars

The theme colors are used with the $color[<name>] function. The colors are applied to various parts of a component (border, text, background, etc.). The ripple colors are used for things that have a ripple effect on them, usually only button or a's with $button on them.

--default
Color used when a color is not specified
--default-ripple
Color used for the ripple effect when a color is not specified
--plain
Color used that is more neutral than the default in high contrast themes
--plain-ripple
Color used for the ripple effect that is more neutral than the default in high contrast themes
--primary
Primary color
--primary-ripple
Primary ripple color
--secondary
Secondary color
--secondary-ripple
Secondary ripple color
--danger
Danger color
--danger-ripple
Danger ripple color
--warning
Warning color
--warning-ripple
Warning ripple color
--accent
Accent color
--accent-ripple
Accent ripple color

Custom Theme Template

/* Replace custom with your theme name */
[ws-x~="@@theme:custom"] {
    /* Font Display */
    --font: ;
    --text-light: ;
    --text-dark: ;
    --text-color-normal: ;
    --text-color-secondary: ;
    --text-color-invert: ;
    --text-color-fill: ;
    --text-size-normal: ;
    --text-size-title: ;
    --text-size-header: ;
    --text-size-info: ;
    --text-size-subtitle: ;

    /* Page/Component Styles */
    --background: ;
    --background-layer: ;
    --background-element: ;
    --layer-border-width: ;
    --layer-border-color: ;
    --ripple-normal: ;
    --shadow-color: ;
    --disabled-background: ;
    color-scheme: ;

    /* Theme Colors */
    --default: ;
    --default-ripple: ;
    --primary: ;
    --primary-ripple: ;
    --secondary: ;
    --secondary-ripple: ;
    --danger: ;
    --danger-ripple: ;
    --warning: ;
    --warning-ripple: ;
    --accent: ;
    --accent-ripple: ;
}