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

Theme Colors

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
• --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: ;
}