Built-in Themes

Built-in Themes

Themes give your project a cohesive look and feel across the entire Web Awesome library.

A theme sets typography, spacing, borders, shadows, and how variants show up on components — all as design tokens. Two themes can share a color palette and variant colors and still feel completely different. Each pre-built theme ships with a default palette and may include custom overrides for individual components.

Default Awesome Shoelace Unlock every theme with Web Awesome Pro! Subscribing to Web Awesome Pro unlocks every theme, plus premium color palettes, the visual Theme Builder, and more.

Using This Theme

Link to This Section
CDN npm Self-Hosted Hosted Projects

To use this theme, add the theme's stylesheet from the CDN:

<link rel="stylesheet" href="https://ka-f.webawesome.com/[email protected]/styles/themes/default.css">

Then apply the following classes to the <html> element:

<html
  class="wa-theme-default wa-palette-default wa-brand-blue">

After installing @awesome.me/webawesome, import the theme's stylesheet:

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

Then apply the following classes to the <html> element:

<html
  class="wa-theme-default wa-palette-default wa-brand-blue">

If you're self-hosting Web Awesome, include the theme's stylesheet from your server:

<link rel="stylesheet" href="/dist/styles/themes/default.css">

Then apply the following classes to the <html> element:

<html
  class="wa-theme-default wa-palette-default wa-brand-blue">

For projects on Free workspaces:

  1. Head over to your project's Settings.
  2. For your Theme, select Default.
  3. For your Color Palette, select Default.
  4. Press Save Changes to immediately update anywhere you're using your project.

For projects on Pro workspaces:

  1. Head over to your project's Settings.
  2. Press Edit Your Theme to open the Theme Builder.
  3. Open Theme and select Default.
  4. Press Save Theme to immediately update anywhere you're using your project.