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.
Using This Theme
To use this theme, add the theme's stylesheet from the CDN:
<link rel="stylesheet" href="https://ka-f.webawesome.com/webawesome@0.17.0/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:
- Head over to your project's
Settings - For your
Theme , selectDefault - For your
Color Palette , selectDefault - Press
Save Changes to immediately update anywhere you're using your project.
For projects on Pro workspaces:
- Head over to your project's
Settings - Press
Edit Your Theme - Open
Theme and selectDefault . - Press
Save Theme to immediately update anywhere you're using your project.
To use this theme, add the theme's stylesheet from the CDN:
<link rel="stylesheet" href="https://ka-f.webawesome.com/webawesome@0.17.0/styles/themes/awesome.css">
Then apply the following classes to the <html> element:
<html class="wa-theme-awesome wa-palette-bright wa-brand-blue">
After installing @awesome.me/webawesome, import the theme's stylesheet:
import '@awesome.me/webawesome/dist/styles/themes/awesome.css';
Then apply the following classes to the <html> element:
<html class="wa-theme-awesome wa-palette-bright 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/awesome.css">
Then apply the following classes to the <html> element:
<html class="wa-theme-awesome wa-palette-bright wa-brand-blue">
For projects on Free workspaces:
- Head over to your project's
Settings - For your
Theme , selectAwesome - For your
Color Palette , selectBright - Press
Save Changes to immediately update anywhere you're using your project.
For projects on Pro workspaces:
- Head over to your project's
Settings - Press
Edit Your Theme - Open
Theme and selectAwesome . - Press
Save Theme to immediately update anywhere you're using your project.
To use this theme, add the theme's stylesheet from the CDN:
<link rel="stylesheet" href="https://ka-f.webawesome.com/webawesome@0.17.0/styles/themes/shoelace.css">
Then apply the following classes to the <html> element:
<html class="wa-theme-shoelace wa-palette-shoelace wa-brand-blue">
After installing @awesome.me/webawesome, import the theme's stylesheet:
import '@awesome.me/webawesome/dist/styles/themes/shoelace.css';
Then apply the following classes to the <html> element:
<html class="wa-theme-shoelace wa-palette-shoelace 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/shoelace.css">
Then apply the following classes to the <html> element:
<html class="wa-theme-shoelace wa-palette-shoelace wa-brand-blue">
For projects on Free workspaces:
- Head over to your project's
Settings - For your
Theme , selectShoelace - For your
Color Palette , selectShoelace - Press
Save Changes to immediately update anywhere you're using your project.
For projects on Pro workspaces:
- Head over to your project's
Settings - Press
Edit Your Theme - Open
Theme and selectShoelace . - Press
Save Theme to immediately update anywhere you're using your project.