---
title: Themes
description: Themes are collections of design tokens that thread through every Web Awesome component and pattern.
  Themes play a crucial role in [customizing Web Awesome](/docs/customizing).
layout: overview
override:tags: []
forTag: theme
categories:
  tags: [other, pro]
  other: Free
---

<div class="max-line-length">
{% markdown %}

## What's a Theme?

A theme is a collection of standardized [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*), 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 section](/docs/tokens/) 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` to ensure the styles are applied to the shadow roots of custom elements.

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

```css
: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 {
  /* subset of CSS custom properties for a dark color scheme */
}
```

## Using Themes

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

{% endmarkdown %}
</div>
