Themes
Themes
Themes are collections of design tokens that give a cohesive look and feel to the entire Web Awesome library. Style and restyle your website at will by loading any pre-built theme.
See one you like? Log in to create a project with any one of these themes. (Plus, there are even more themes to love with Web Awesome Pro.
Theme
Jump to heading
Description
Using This Theme
Jump to heading
For projects on Free teams:
- Head over to your project's
Settings. - For your Theme, select
Default. - For your Color Palette, select
Default. - Press Save Changes to immediately update anywhere you're using your project.
For projects on Pro teams:
- Head over to your project's
Settings. - Press
Edit Your Theme to open the Theme Builder. - Open Theme and select Default.
- Press Save Theme to immediately update anywhere you're using your project.
To use this theme, 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">
To use this theme, include the theme's stylesheet:
<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 teams:
- Head over to your project's
Settings. - For your Theme, select
Awesome. - For your Color Palette, select
Bright. - Press Save Changes to immediately update anywhere you're using your project.
For projects on Pro teams:
- Head over to your project's
Settings. - Press
Edit Your Theme to open the Theme Builder. - Open Theme and select Awesome.
- Press Save Theme to immediately update anywhere you're using your project.
To use this theme, 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">
To use this theme, include the theme's stylesheet:
<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 teams:
- Head over to your project's
Settings. - For your Theme, select
Shoelace. - For your Color Palette, select
Shoelace. - Press Save Changes to immediately update anywhere you're using your project.
For projects on Pro teams:
- Head over to your project's
Settings. - Press
Edit Your Theme to open the Theme Builder. - Open Theme and select Shoelace.
- Press Save Theme to immediately update anywhere you're using your project.
To use this theme, 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">
To use this theme, include the theme's stylesheet:
<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 Pro teams:
- Head over to your project's
Settings. - Press
Edit Your Theme to open the Theme Builder. - Open Theme and select Active.
- Press Save Theme to immediately update anywhere you're using your project.
To use this theme, import the theme's stylesheet:
import '@awesome.me/webawesome/dist/styles/themes/active.css';
Then apply the following classes to the <html> element:
<html class="wa-theme-active wa-palette-rudimentary wa-brand-green">
To use this theme, include the theme's stylesheet:
<link rel="stylesheet" href="/dist/styles/themes/active.css" />
Then apply the following classes to the <html> element:
<html class="wa-theme-active wa-palette-rudimentary wa-brand-green">
For projects on Pro teams:
- Head over to your project's
Settings. - Press
Edit Your Theme to open the Theme Builder. - Open Theme and select Brutalist.
- Press Save Theme to immediately update anywhere you're using your project.
To use this theme, import the theme's stylesheet:
import '@awesome.me/webawesome/dist/styles/themes/brutalist.css';
Then apply the following classes to the <html> element:
<html class="wa-theme-brutalist wa-palette-default wa-brand-blue">
To use this theme, include the theme's stylesheet:
<link rel="stylesheet" href="/dist/styles/themes/brutalist.css" />
Then apply the following classes to the <html> element:
<html class="wa-theme-brutalist wa-palette-default wa-brand-blue">
For projects on Pro teams:
- Head over to your project's
Settings. - Press
Edit Your Theme to open the Theme Builder. - Open Theme and select Glossy.
- Press Save Theme to immediately update anywhere you're using your project.
To use this theme, import the theme's stylesheet:
import '@awesome.me/webawesome/dist/styles/themes/glossy.css';
Then apply the following classes to the <html> element:
<html class="wa-theme-glossy wa-palette-elegant wa-brand-indigo">
To use this theme, include the theme's stylesheet:
<link rel="stylesheet" href="/dist/styles/themes/glossy.css" />
Then apply the following classes to the <html> element:
<html class="wa-theme-glossy wa-palette-elegant wa-brand-indigo">
For projects on Pro teams:
- Head over to your project's
Settings. - Press
Edit Your Theme to open the Theme Builder. - Open Theme and select Matter.
- Press Save Theme to immediately update anywhere you're using your project.
To use this theme, import the theme's stylesheet:
import '@awesome.me/webawesome/dist/styles/themes/matter.css';
Then apply the following classes to the <html> element:
<html class="wa-theme-matter wa-palette-mild wa-brand-purple">
To use this theme, include the theme's stylesheet:
<link rel="stylesheet" href="/dist/styles/themes/matter.css" />
Then apply the following classes to the <html> element:
<html class="wa-theme-matter wa-palette-mild wa-brand-purple">
For projects on Pro teams:
- Head over to your project's
Settings. - Press
Edit Your Theme to open the Theme Builder. - Open Theme and select Mellow.
- Press Save Theme to immediately update anywhere you're using your project.
To use this theme, import the theme's stylesheet:
import '@awesome.me/webawesome/dist/styles/themes/mellow.css';
Then apply the following classes to the <html> element:
<html class="wa-theme-mellow wa-palette-natural wa-brand-blue">
To use this theme, include the theme's stylesheet:
<link rel="stylesheet" href="/dist/styles/themes/mellow.css" />
Then apply the following classes to the <html> element:
<html class="wa-theme-mellow wa-palette-natural wa-brand-blue">
For projects on Pro teams:
- Head over to your project's
Settings. - Press
Edit Your Theme to open the Theme Builder. - Open Theme and select Playful.
- Press Save Theme to immediately update anywhere you're using your project.
To use this theme, import the theme's stylesheet:
import '@awesome.me/webawesome/dist/styles/themes/playful.css';
Then apply the following classes to the <html> element:
<html class="wa-theme-playful wa-palette-rudimentary wa-brand-purple">
To use this theme, include the theme's stylesheet:
<link rel="stylesheet" href="/dist/styles/themes/playful.css" />
Then apply the following classes to the <html> element:
<html class="wa-theme-playful wa-palette-rudimentary wa-brand-purple">
For projects on Pro teams:
- Head over to your project's
Settings. - Press
Edit Your Theme to open the Theme Builder. - Open Theme and select Premium.
- Press Save Theme to immediately update anywhere you're using your project.
To use this theme, import the theme's stylesheet:
import '@awesome.me/webawesome/dist/styles/themes/premium.css';
Then apply the following classes to the <html> element:
<html class="wa-theme-premium wa-palette-anodized wa-brand-cyan">
To use this theme, include the theme's stylesheet:
<link rel="stylesheet" href="/dist/styles/themes/premium.css" />
Then apply the following classes to the <html> element:
<html class="wa-theme-premium wa-palette-anodized wa-brand-cyan">
For projects on Pro teams:
- Head over to your project's
Settings. - Press
Edit Your Theme to open the Theme Builder. - Open Theme and select Tailspin.
- Press Save Theme to immediately update anywhere you're using your project.
To use this theme, import the theme's stylesheet:
import '@awesome.me/webawesome/dist/styles/themes/tailspin.css';
Then apply the following classes to the <html> element:
<html class="wa-theme-tailspin wa-palette-vogue wa-brand-indigo">
To use this theme, include the theme's stylesheet:
<link rel="stylesheet" href="/dist/styles/themes/tailspin.css" />
Then apply the following classes to the <html> element:
<html class="wa-theme-tailspin wa-palette-vogue wa-brand-indigo">