Themes

In this guide we will walk you through all the available themes, themes formats and how to use them.

Theming container

Applying the themes is done by using their special CSS classes on the theming container.

Generally we recommend applying these theming CSS classes to one of the root HTML elements of your application (<html> or <body> elements).

There are 2 things to note related to that:

to make sure proper background color is applied you need to either use a flix-main-wrapper layout element within the theming container or set the background of you Apps root element via theme variable: background-color: var(--flix-bg-primary-color);.
the theming container needs to be the first parent of all honeycomb components, including the aforementioned flix-main-wrapper.

The setup can look like this:

<!DOCTYPE html>
<!-- adding a theme container with flix theme -->
<html class="flix-theme-flix">
<!-- applying proper background with main-wrapper element -->
<body class="flix-main-wrapper">
  <!-- Your app with all the Honeycomb component you use needs to be here -->
  <header class="flix-header"></header>
  <section class="flix-page-container"></section>
  <footer class="flix-footer"></footer>
  <!-- This JavaScript snippet will detect user color scheme preference and switch the theme automatically  -->
  <script>
    if (window.matchMedia) {
      const matchMedia = window.matchMedia('(prefers-color-scheme: dark)');

      if (matchMedia.matches) {
        document.documentElement.classList.add('flix-theme-dark');
      } else {
        document.documentElement.classList.remove('flix-theme-dark');
      }

      matchMedia.addEventListener('change', (event) => {
        document.documentElement.classList.toggle('flix-theme-dark', event.matches);
      });
    }
  </script>
</body>
</html>
<!DOCTYPE html>
<!-- adding a theme container with flix theme -->
<html class="flix-theme-flix">
<!-- applying proper background with main-wrapper element -->
<body class="flix-main-wrapper">
  <!-- Your app with all the Honeycomb component you use needs to be here -->
  <header class="flix-header"></header>
  <section class="flix-page-container"></section>
  <footer class="flix-footer"></footer>
  <!-- This JavaScript snippet will detect user color scheme preference and switch the theme automatically  -->
  <script>
    if (window.matchMedia) {
      const matchMedia = window.matchMedia('(prefers-color-scheme: dark)');

      if (matchMedia.matches) {
        document.documentElement.classList.add('flix-theme-dark');
      } else {
        document.documentElement.classList.remove('flix-theme-dark');
      }

      matchMedia.addEventListener('change', (event) => {
        document.documentElement.classList.toggle('flix-theme-dark', event.matches);
      });
    }
  </script>
</body>
</html>