Themes & Color Palettes

Themes & Color Palettes themes color palettes link

Full documentation: https://webawesome.com/docs/themes

Applying Themes applying themes link

Apply theme classes to the <html> element:

<html class="wa-theme-awesome wa-palette-bright wa-brand-indigo">

For npm/CDN users, import the theme stylesheet:

import '@awesome.me/webawesome/dist/styles/themes/awesome.css';

Free Themes free themes link

Theme Description
Default The foundational theme using default design tokens
Awesome Bright, vibrant color palette for modern interfaces
Shoelace Classic Shoelace styling for familiarity

Pro Themes pro themes link

Requires Web Awesome Pro.

Theme Palette Brand Color
Active Rudimentary Green
Brutalist Default Blue
Glossy Elegant Indigo
Matter Mild Purple
Mellow Natural Blue
Playful Rudimentary Purple
Premium Anodized Cyan
Tailspin Vogue Indigo

Color Palettes color palettes link

Each palette provides 10 color hues with a scale of 11 tints.

Free Palettes free palettes link

  • Default - Standard balanced hues
  • Bright - Enhanced saturation
  • Shoelace - Classic Shoelace colors

Pro Palettes pro palettes link

  • Rudimentary
  • Elegant
  • Mild
  • Natural
  • Anodized
  • Vogue

Applying Palettes applying palettes link 

<html class="wa-palette-bright">

CSS variables follow the pattern --wa-color-{hue}-{tint}:

.my-element {
  color: var(--wa-color-blue-60);
  background: var(--wa-color-gray-10);
}

Theme Builder theme builder link

Pro users can customize themes using the Theme Builder. Access it through Settings > Edit Your Theme.