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 .
Theme
Jump to heading
Description
Using This Theme
Jump to heading
To use this theme, add the theme's stylesheet from the CDN:
<link rel="stylesheet" href="https://ka-f.webawesome.com/webawesome@0.14.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, select
Default. - For your Color Palette, select
Default. - 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 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, add the theme's stylesheet from the CDN:
<link rel="stylesheet" href="https://ka-f.webawesome.com/webawesome@0.14.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, select
Awesome. - For your Color Palette, select
Bright. - 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 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, add the theme's stylesheet from the CDN:
<link rel="stylesheet" href="https://ka-f.webawesome.com/webawesome@0.14.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, select
Shoelace. - For your Color Palette, select
Shoelace. - 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 to open the Theme Builder. - Open Theme and select Shoelace.
- Press Save Theme to immediately update anywhere you're using your project.
After installing @awesome.me/webawesome, 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">
If you're self-hosting Web Awesome, include the theme's stylesheet from your server:
<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 workspaces:
- 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.
After installing @awesome.me/webawesome, 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">
If you're self-hosting Web Awesome, include the theme's stylesheet from your server:
<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 workspaces:
- 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.
After installing @awesome.me/webawesome, 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">
If you're self-hosting Web Awesome, include the theme's stylesheet from your server:
<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 workspaces:
- 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.
After installing @awesome.me/webawesome, 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">
If you're self-hosting Web Awesome, include the theme's stylesheet from your server:
<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 workspaces:
- 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.
After installing @awesome.me/webawesome, 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">
If you're self-hosting Web Awesome, include the theme's stylesheet from your server:
<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 workspaces:
- 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.
After installing @awesome.me/webawesome, 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">
If you're self-hosting Web Awesome, include the theme's stylesheet from your server:
<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 workspaces:
- 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.
After installing @awesome.me/webawesome, 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">
If you're self-hosting Web Awesome, include the theme's stylesheet from your server:
<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 workspaces:
- 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.
After installing @awesome.me/webawesome, 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">
If you're self-hosting Web Awesome, include the theme's stylesheet from your server:
<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">
For projects on Pro workspaces:
- 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.