Themes

What's a Theme? Jump to heading #

A theme is a collection of standardized CSS custom properties, also called "design tokens," that cover a range of styles from colors to transitions. We use these tokens throughout Web Awesome components for a cohesive look and feel. Our Design Tokens pages document these styles so that you can use them freely throughout your project and customize them as needed.

Themes are scoped to unique classes, such as wa-theme-default or wa-theme-classic. Scoping to unique classes allows you to import multiple themes and use them interchangeably without collisions. Please note that if you import multiple themes, the last one will be the default that will apply if no class is used.

Each theme may also include both light and dark color schemes with the classes wa-light and wa-dark. You can use these classes to apply a specific color scheme to an entire page or just a section. You can also use wa-invert which behaves like wa-dark in light mode, and like wa-light in dark mode. In pre-made themes, we use a light color scheme by default.

Additionally, styles may be scoped to the :root selector to be activated automatically. For pre-made themes, all custom properties are scoped to :root, the theme class, and wa-light.

Finally, we scope themes to :host and :host-context() to ensure the styles are applied to the shadow roots of custom elements.

For example, the default theme is set up like this:

:where(:root),
:host,
.wa-theme-default,
.wa-light,
.wa-dark .wa-invert {
  /* all CSS custom properties for color, typography, space, etc. */
}

.wa-dark,
.wa-invert,
:host-context(.wa-dark) {
  /* subset of CSS custom properties for a dark color scheme */
}

Using Themes Jump to heading #

You can import pre-made themes from the Web Awesome CDN. Refer to each theme’s page for copyable code snippets.