Themes

Honeycomb comes with 3 brand themes, every theme has 2 variations for "dark" mode and a scaled version intended to be used in ticket vending machines (aka tvms). On top of that for accessibility purposes we provide a brand independent "high contrast" theme.

Here are all theme names in one list:

flix, flix-dark and flix-tvm
neptune, neptune-dark and neptune-tvm
kamil, kamil-dark and kamil-tvm
high-contrast

Theme files

If you are using CSS you can include the theme files from our CDN.

If you are using SASS/SCSS, the same theme files can be found on the scss folder instead.

Please note that "TVM" themes are not included in the bundle, please include them separately if needed.

Theme "Flix"

flix theme doesn't require any classes and is applied by default.
flix-theme-flix-dark for flix dark theme;
flix-theme-flix-tvm for flix branded TVM theme;

Flix Flix TVM Flix + Dark

Flix minified Flix TVM minified Flix + Dark minified

Theme "Kamil"

flix-theme-kamil for kamil theme;
flix-theme-kamil-dark for kamil dark theme;
flix-theme-kamil-tvm for kamil TVM theme;

Kamil Kamil TVM Kamil + Dark

Kamil minified Kamil TVM minified Kamil + Dark minified

Theme "Neptune"

flix-theme-neptune for neptune theme;
flix-theme-neptune-dark for neptune dark theme;
flix-theme-neptune-tvm for neptune TVM theme;

Neptune Neptune TVM Neptune + Dark

Neptune minified Neptune TVM minified Neptune + Dark + TVM minified

Theme "High Contrast"

flix-theme-high-contrast for high contrast theme;

High Contrast High Contrast minified

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);
theming container needs to be a parent of the outer most honeycomb component including mentioned flix-main-wrapper.

The setup can look like this:

<!DOCTYPE html>
<!-- adding a theme container -->
<html class="flix-theme-flix-dark">
<!-- 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-flix-dark');
      } else {
        document.documentElement.classList.remove('flix-theme-flix-dark');
      }

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

Theme variables

We utilize CSS custom properties for theming our components which makes it super easy to apply them in any CSS code. To namespace Honeycomb theme vars, all the variables are prefixed with a --flix prefix.

Say you wanna apply our ui-primary-color as a background and spacing-2 as a padding to one of your awesome components, this would look like this:

.my-awesome-component {
  padding: 0 var(--flix-spacing-2);
  background: var(--flix-ui-primary-color);
}

If you have SASS based stylesheets you can also use cssvar() function that takes care of prefixing and stuff. With this in mind the above example in SCSS would look like this:

// including honeycomb tools and theme variables
@import '@flixbus/honeycomb/dist/scss/honeycomb-tools';
@import '@flixbus/honeycomb/dist/scss/honeycomb-themes';

.my-awesome-component {
  padding: 0 cssvar(spacing-2);
  background: cssvar(ui-primary-color);
}

Bellow you can find a list of all the available variables with their respective values. Notice that it's not only colors that are provided in there, there are also spacing and geometry vars as well as icons.