Theming
Web Awesome themes apply a cohesive look and feel across the entire library, built from stackable layers — a theme, a color palette, variants, and a light or dark color scheme — that you mix and match with classes on the <html> element.
Try it live! Use the
Key Concepts
Themes
.wa-theme-{name}
A theme is the overall look — fonts, borders, space, shadows, and how each variant gets used across components. Two themes can share a palette and variants and still feel completely different. Themes ship with a default palette and may include custom CSS overrides for individual components.
Your theme is determined by class="wa-theme-{name}" on the <html> element. If no class is specified, the default theme is used.
Color Palettes
.wa-palette-{name}
A color palette is the full set of 10 hues — red, orange, yellow, green, cyan, blue, indigo, purple, pink, and gray — each with 11 tints from 05 (darkest) to 95 (lightest), all available as color design tokens.
Each palette has its own hue shifts and chroma, so swapping palettes changes the entire feel of your project — especially alongside a theme and variant colors. Your palette is determined by class="wa-palette-{name}" on the <html> element; if no class is specified, the default palette is used.
--wa-color-red-*
--wa-color-orange-*
--wa-color-yellow-*
--wa-color-green-*
--wa-color-cyan-*
--wa-color-blue-*
--wa-color-indigo-*
--wa-color-purple-*
--wa-color-pink-*
--wa-color-gray-*
Variants
.wa-{variant}-{hue}
Variants assign palette hues to five semantic roles — brand, neutral, success, warning, and danger — so components like buttons and callouts can convey meaning through color. Any hue from your palette can be assigned to any variant with class="wa-{variant}-{hue}". Apply the class to the <html> element to set variants globally, to a wrapper to scope them to one section, or to a single component to override just that element. For deeper customization, override the --wa-color-{variant}-* tokens in your own CSS.
--wa-color-brand-*
--wa-color-neutral-*
--wa-color-success-*
--wa-color-warning-*
--wa-color-danger-*
Light & Dark Mode
.wa-light .wa-dark
Every theme is designed to adapt to light and dark mode. Light mode applies by default; apply class="wa-light" or class="wa-dark" to set the color scheme on the page or any section. To invert sections, detect user preference, or apply dark mode automatically, head over to Customizing & Theming.
Light
Dark
Using Themes
For tailored guidance, select your theme, color palette, and variant colors below, then follow the instructions for your preferred method.
To use these choices, add the following stylesheets from the CDN:
<link rel="stylesheet" href="https://ka-f.webawesome.com/webawesome@0.17.0/styles/themes/default.css" /> <link rel="stylesheet" href="https://ka-f.webawesome.com/webawesome@0.17.0/styles/color/palettes/default.css" />
Then, apply the following classes to the <html> element:
<html class="wa-theme-default wa-palette-default wa-brand-blue wa-neutral-gray wa-success-green wa-warning-yellow wa-danger-red">
After installing @awesome.me/webawesome, import the following stylesheets:
import '@awesome.me/webawesome/dist/styles/themes/default.css'; import '@awesome.me/webawesome/dist/styles/color/palettes/default.css';
Then, apply the following classes to the <html> element:
<html class="wa-theme-default wa-palette-default wa-brand-blue wa-neutral-gray wa-success-green wa-warning-yellow wa-danger-red">
If you're self-hosting Web Awesome, include the following stylesheets from your server:
<link rel="stylesheet" href="/dist/styles/themes/default.css" /> <link rel="stylesheet" href="/dist/styles/color/palettes/default.css" />
Then, apply the following classes to the <html> element:
<html class="wa-theme-default wa-palette-default wa-brand-blue wa-neutral-gray wa-success-green wa-warning-yellow wa-danger-red">
Free Workspace Projects
| Step | Action |
|---|---|
| 1 | Go to your project's |
| 2 | For |
| 3 | For |
| 4 | Save your theme to immediately update anywhere you're using your project. |
| 5 | In your own files, apply the following classes to the <html> element:
|
Pro Workspace Projects
| Step | Action |
|---|---|
| 1 | Go to your project's |
| 2 | Press |
| 3 | Open |
| 4 | Open |
| 5 | Save your theme to immediately update anywhere you're using your project. |
Creating Your Own
You can build a custom theme with the Theme Builder to customize colors, fonts, roundness, spacing, and icons visually, or with custom CSS by overriding design tokens in your own stylesheet.
Quick Reference
| Task | How To | Learn More |
|---|---|---|
| Change my brand color | Add class="wa-brand-{hue}" to <html> |
Changing Variants |
| Switch color palettes | Load the palette stylesheet, then add class="wa-palette-{name}" to <html> |
Browse Palettes |
| Use a different theme | Load the theme stylesheet, then add class="wa-theme-{name}" to <html> |
Built-in Themes |
| Toggle dark mode | Add class="wa-dark" to <html> (or any section) |
Light and Dark Mode |
| Override a single token | Define a --wa-* custom property associated with a design token in your own CSS |
Customizing With CSS |