3.0.0-alpha.9 Alpha

Default Color Palette

Rudimentary

How to use this theme

You can import this theme from the Web Awesome CDN.

In HTML In CSS

Simply add the following code to the <head> of your page:

<link rel="stylesheet" href="https://early.webawesome.com/webawesome@3.0.0-alpha.9/dist/styles/themes/playful.css" />

Simply add the following code at the top of your CSS file:

@import url('https://early.webawesome.com/webawesome@3.0.0-alpha.9/dist/styles/themes/playful.css');

Remixing

If you want to combine the colors from this theme with another theme, you can import this CSS file after the other theme’s CSS file:

In HTML In CSS

Simply add the following code to the <head> of your page:

<link rel="stylesheet" href="https://early.webawesome.com/webawesome@3.0.0-alpha.9/dist/styles/themes/playful/color.css" />

Simply add the following code at the top of your CSS file:

@import url('https://early.webawesome.com/webawesome@3.0.0-alpha.9/dist/styles/themes/playful/color.css');

To use the typography from this theme with another theme, you can import this CSS file after the other theme’s CSS file:

In HTML In CSS

Simply add the following code to the <head> of your page:

<link rel="stylesheet" href="https://early.webawesome.com/webawesome@3.0.0-alpha.9/dist/styles/themes/playful/typography.css" />

Simply add the following code at the top of your CSS file:

@import url('https://early.webawesome.com/webawesome@3.0.0-alpha.9/dist/styles/themes/playful/typography.css');
Please note that not all combinations will look good — once you’re mixing and matching, you’re on your own!

Dark mode

To activate the dark color scheme of the theme on any element and its contents, apply the class wa-dark to it. This means you can use different color schemes throughout the page. Here, we use the default theme with a dark sidebar:

<html>
  <head>
    <link rel="stylesheet" href="path/to/web-awesome/dist/styles/themes/default.css" />
  </head>

  <body>
    <nav class="wa-dark">
      <!-- dark-themed sidebar -->
    </nav>

    <!-- light-themed content -->
  </body>
</html>

You can apply the class to the <html> element on your page to activate the dark color scheme for the entire page.

<html class="wa-dark">
  <head>
    <link rel="stylesheet" href="path/to/web-awesome/dist/styles/themes/playful.css" />
    <!-- other links, scripts, and metadata -->
  </head>
  <body>
    <!-- page content -->
  </body>
</html>

Detecting Color Scheme Preference

Web Awesome's themes have both light and dark styles built in. However, Web Awesome doesn't try to auto-detect the user's light/dark mode preference. This should be done at the application level. As a best practice, to provide a dark theme in your app, you should:

Web Awesome avoids using the prefers-color-scheme media query because not all apps support dark mode, and it would break things for the ones that don't.

    No results