Color

How to use this theme

You can import this theme from the Web Awesome CDN.

In HTML In CSS

Add the following code to the <head> of your page:

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

Add the following code at the top of your CSS file:

@import url('https://early.webawesome.com/[email protected]/dist/styles/themes/default.css');

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/default.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:

  • Check for prefers-color-scheme and use its value by default
  • Allow the user to override the setting in your app
  • Remember the user's preference and restore it on subsequent logins

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.

Assuming the user's preference is in a variable called colorScheme (values: auto, light, dark), you can use the following JS snippet to apply the wa-dark class to the <html> element accordingly:

const systemDark = window.matchMedia('(prefers-color-scheme: dark)');
const applyDark = function (event = systemDark) {
  const isDark = colorScheme === 'auto' ? event.matches : colorScheme === 'dark';
  document.documentElement.classList.toggle('wa-dark', isDark);
};
systemDark.addEventListener('change', applyDark);
applyDark();
    No results