Themes

Honeycomb comes with 3 brand themes and their dark mode counterparts plus a high contrast theme:

flix and flix-dark
neptune and neptune-dark
kamil and kamil-dark
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.

Theme "Flix"

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

Flix Flix minified Flix + Dark Flix + Dark minified

Theme "Kamil"

flix-theme-kamil for kamil theme;
flix-theme-kamil-dark for kamil dark theme;

Kamil Kamil minified Kamil + Dark Kamil + Dark minified

Theme "Neptune"

flix-theme-neptune for neptune theme;
flix-theme-neptune-dark for neptune dark theme;

Neptune Neptune minified Neptune + Dark Neptune + Dark 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/assets/scss/honeycomb-tools';
@import '@flixbus/honeycomb/assets/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.

--flix-brand-primary-color: #73d700; 
--flix-brand-secondary-color: #ffad00; 
--flix-ui-primary-color: #31a100; 
--flix-ui-primary-light-color: #5cc500; 
--flix-ui-primary-dark-color: #187d00; 
--flix-grayscale-0-color: #fff; 
--flix-grayscale-10-color: #f7f7f7; 
--flix-grayscale-30-color: #e1e1e1; 
--flix-grayscale-50-color: #c8c8c8; 
--flix-grayscale-70-color: #646464; 
--flix-grayscale-90-color: #444; 
--flix-grayscale-100-color: #353535; 
--flix-neutral-color: #016ae7; 
--flix-success-color: #228f00; 
--flix-success-dark-color: #136b00; 
--flix-warning-color: #ff5704; 
--flix-warning-dark-color: #c42d00; 
--flix-danger-color: #dd2828; 
--flix-danger-dark-color: #b31414; 
--flix-bg-primary-color: #fff; 
--flix-bg-primary-transparent-color: rgba(255, 255, 255, 0.88); 
--flix-bg-secondary-color: #f7f7f7; 
--flix-box-bg-color: #fff; 
--flix-highlight-color: #e5f9c0; 
--flix-overlay-bg-color: rgba(0, 0, 0, 0.5); 
--flix-focus-outline-color: #016ae7; 
--flix-content-primary-color: #353535; 
--flix-content-secondary-color: #646464; 
--flix-heading-font-color: #353535; 
--flix-link-color: #0047de; 
--flix-line-primary-color: #c8c8c8; 
--flix-icon-primary-color: #8b8b8b; 
--flix-icon-secondary-color: #31a100; 
--flix-box-shadow-color: rgba(0, 0, 0, 0.18); 
--flix-box-shadow-subtle-color: rgba(0, 0, 0, 0.06); 
--flix-button-primary-color: #a2e53f; 
--flix-button-label-color: #353535; 
--flix-header-bg-color: #a2e53f; 
--flix-header-color: #353535; 
--flix-header-nav-bg-color-tablet: #73d700; 
--flix-input-border-color: #8b8b8b; 
--flix-input-height-mobile: 44px; 
--flix-input-height-desktop: 36px; 
--flix-spacing-1: 6px; 
--flix-spacing-2: 12px; 
--flix-spacing-3: 18px; 
--flix-spacing-4: 24px; 
--flix-spacing-5: 30px; 
--flix-spacing-6: 36px; 
--flix-spacing-7: 42px; 
--flix-spacing-8: 48px; 
--flix-spacing-9: 54px; 
--flix-spacing-10: 60px; 
--flix-spacing-11: 66px; 
--flix-spacing-12: 72px; 
--flix-spacing-half: 3px; 
--flix-page-min-width: 320px; 
--flix-page-max-width: 1200px; 
--flix-font-size-primary: 1rem; 
--flix-font-size-small: 0.875rem; 
--flix-font-size-fineprint: 0.75rem; 
--flix-font-size-h1: 1.7rem; 
--flix-font-size-h2: 1.3rem; 
--flix-font-size-h3: 1.1rem; 
--flix-font-size-h4: 1rem; 
--flix-line-height-primary: 1.5rem; 
--flix-line-height-small: 1.125rem; 
--flix-line-height-fineprint: 0.938rem; 
--flix-line-height-h1: 2rem; 
--flix-line-height-h2: 1.7rem; 
--flix-line-height-h3: 1.5rem; 
--flix-line-height-h4: 1.5rem; 
--flix-hover-layer-color: linear-gradient(rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.06)); 
--flix-pressed-layer-color: linear-gradient(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.12)); 
--flix-disabled-element-opacity: 0.5; 
--flix-primary-border-radius: 6px; 
--flix-primary-box-shadow: 0px 6px 12px rgba(0, 0, 0, .06), 0px 3px 18px rgba(0, 0, 0, .06), 0px 3px 6px rgba(0, 0, 0, .18); 
--flix-color-scheme: normal; 
--flix-font-family-primary: Roboto, Arial, sans-serif; 
--flix-font-weight-normal: 400; 
--flix-font-weight-semibold: 500; 
--flix-font-weight-bold: 700; 
--flix-brand-primary-color: #73d700; 
--flix-brand-secondary-color: #ffad00; 
--flix-ui-primary-color: #73d700; 
--flix-ui-primary-light-color: #44b300; 
--flix-ui-primary-dark-color: #cef38d; 
--flix-grayscale-0-color: #252525; 
--flix-grayscale-10-color: #353535; 
--flix-grayscale-30-color: #444; 
--flix-grayscale-50-color: #646464; 
--flix-grayscale-70-color: #8b8b8b; 
--flix-grayscale-90-color: #c8c8c8; 
--flix-grayscale-100-color: #fff; 
--flix-neutral-color: #039fd5; 
--flix-success-color: #44b300; 
--flix-success-dark-color: #cef38d; 
--flix-warning-color: #ff8206; 
--flix-warning-dark-color: #ffe393; 
--flix-danger-color: #fd5a5a; 
--flix-danger-dark-color: #ffc9ce; 
--flix-bg-primary-color: #252525; 
--flix-bg-primary-transparent-color: rgba(53, 53, 53, 0.88); 
--flix-bg-secondary-color: #202020; 
--flix-box-bg-color: #353535; 
--flix-highlight-color: #136b00; 
--flix-overlay-bg-color: rgba(0, 0, 0, 0.5); 
--flix-focus-outline-color: #016ae7; 
--flix-content-primary-color: #fff; 
--flix-content-secondary-color: #c8c8c8; 
--flix-heading-font-color: #fff; 
--flix-link-color: #3bd0de; 
--flix-line-primary-color: #646464; 
--flix-icon-primary-color: #fff; 
--flix-icon-secondary-color: #73D700; 
--flix-box-shadow-color: rgba(0, 0, 0, 0.18); 
--flix-box-shadow-subtle-color: rgba(0, 0, 0, 0.06); 
--flix-button-primary-color: #a2e53f; 
--flix-button-label-color: #353535; 
--flix-header-bg-color: #0f5900; 
--flix-header-color: #fff; 
--flix-header-nav-bg-color-tablet: #0b4000; 
--flix-input-border-color: #c8c8c8; 
--flix-input-height-mobile: 44px; 
--flix-input-height-desktop: 36px; 
--flix-spacing-1: 6px; 
--flix-spacing-2: 12px; 
--flix-spacing-3: 18px; 
--flix-spacing-4: 24px; 
--flix-spacing-5: 30px; 
--flix-spacing-6: 36px; 
--flix-spacing-7: 42px; 
--flix-spacing-8: 48px; 
--flix-spacing-9: 54px; 
--flix-spacing-10: 60px; 
--flix-spacing-11: 66px; 
--flix-spacing-12: 72px; 
--flix-spacing-half: 3px; 
--flix-page-min-width: 320px; 
--flix-page-max-width: 1200px; 
--flix-font-size-primary: 1rem; 
--flix-font-size-small: 0.875rem; 
--flix-font-size-fineprint: 0.75rem; 
--flix-font-size-h1: 1.7rem; 
--flix-font-size-h2: 1.3rem; 
--flix-font-size-h3: 1.1rem; 
--flix-font-size-h4: 1rem; 
--flix-line-height-primary: 1.5rem; 
--flix-line-height-small: 1.125rem; 
--flix-line-height-fineprint: 0.938rem; 
--flix-line-height-h1: 2rem; 
--flix-line-height-h2: 1.7rem; 
--flix-line-height-h3: 1.5rem; 
--flix-line-height-h4: 1.5rem; 
--flix-hover-layer-color: linear-gradient(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.12)); 
--flix-pressed-layer-color: linear-gradient(rgba(0, 0, 0, 0.24), rgba(0, 0, 0, 0.24)); 
--flix-disabled-element-opacity: 0.5; 
--flix-primary-border-radius: 6px; 
--flix-primary-box-shadow: 0px 6px 12px rgba(0, 0, 0, .06), 0px 3px 18px rgba(0, 0, 0, .06), 0px 3px 6px rgba(0, 0, 0, .18); 
--flix-color-scheme: dark; 
--flix-font-family-primary: Roboto, Arial, sans-serif; 
--flix-font-weight-normal: 400; 
--flix-font-weight-semibold: 500; 
--flix-font-weight-bold: 700;

--flix-brand-primary-color: #73d700; 
--flix-brand-secondary-color: #ffad00; 
--flix-ui-primary-color: #31a100; 
--flix-ui-primary-light-color: #5cc500; 
--flix-ui-primary-dark-color: #187d00; 
--flix-grayscale-0-color: #fff; 
--flix-grayscale-10-color: #f7f7f7; 
--flix-grayscale-30-color: #e1e1e1; 
--flix-grayscale-50-color: #c8c8c8; 
--flix-grayscale-70-color: #646464; 
--flix-grayscale-90-color: #444; 
--flix-grayscale-100-color: #353535; 
--flix-neutral-color: #016ae7; 
--flix-success-color: #228f00; 
--flix-success-dark-color: #136b00; 
--flix-warning-color: #ff5704; 
--flix-warning-dark-color: #c42d00; 
--flix-danger-color: #dd2828; 
--flix-danger-dark-color: #b31414; 
--flix-bg-primary-color: #fff; 
--flix-bg-primary-transparent-color: rgba(255, 255, 255, 0.88); 
--flix-bg-secondary-color: #f7f7f7; 
--flix-box-bg-color: #fff; 
--flix-highlight-color: #e5f9c0; 
--flix-overlay-bg-color: rgba(0, 0, 0, 0.5); 
--flix-focus-outline-color: #016ae7; 
--flix-content-primary-color: #353535; 
--flix-content-secondary-color: #646464; 
--flix-heading-font-color: #353535; 
--flix-link-color: #0047de; 
--flix-line-primary-color: #c8c8c8; 
--flix-icon-primary-color: #8b8b8b; 
--flix-icon-secondary-color: #31a100; 
--flix-box-shadow-color: rgba(0, 0, 0, 0.18); 
--flix-box-shadow-subtle-color: rgba(0, 0, 0, 0.06); 
--flix-button-primary-color: #a2e53f; 
--flix-button-label-color: #353535; 
--flix-header-bg-color: #a2e53f; 
--flix-header-color: #353535; 
--flix-header-nav-bg-color-tablet: #73d700; 
--flix-input-border-color: #8b8b8b; 
--flix-input-height-mobile: 44px; 
--flix-input-height-desktop: 36px; 
--flix-spacing-1: 6px; 
--flix-spacing-2: 12px; 
--flix-spacing-3: 18px; 
--flix-spacing-4: 24px; 
--flix-spacing-5: 30px; 
--flix-spacing-6: 36px; 
--flix-spacing-7: 42px; 
--flix-spacing-8: 48px; 
--flix-spacing-9: 54px; 
--flix-spacing-10: 60px; 
--flix-spacing-11: 66px; 
--flix-spacing-12: 72px; 
--flix-spacing-half: 3px; 
--flix-page-min-width: 320px; 
--flix-page-max-width: 1200px; 
--flix-font-size-primary: 1rem; 
--flix-font-size-small: 0.875rem; 
--flix-font-size-fineprint: 0.75rem; 
--flix-font-size-h1: 1.7rem; 
--flix-font-size-h2: 1.3rem; 
--flix-font-size-h3: 1.1rem; 
--flix-font-size-h4: 1rem; 
--flix-line-height-primary: 1.5rem; 
--flix-line-height-small: 1.125rem; 
--flix-line-height-fineprint: 0.938rem; 
--flix-line-height-h1: 2rem; 
--flix-line-height-h2: 1.7rem; 
--flix-line-height-h3: 1.5rem; 
--flix-line-height-h4: 1.5rem; 
--flix-hover-layer-color: linear-gradient(rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.06)); 
--flix-pressed-layer-color: linear-gradient(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.12)); 
--flix-disabled-element-opacity: 0.5; 
--flix-primary-border-radius: 6px; 
--flix-primary-box-shadow: 0px 6px 12px rgba(0, 0, 0, .06), 0px 3px 18px rgba(0, 0, 0, .06), 0px 3px 6px rgba(0, 0, 0, .18); 
--flix-color-scheme: normal; 
--flix-font-family-primary: Roboto, Arial, sans-serif; 
--flix-font-weight-normal: 400; 
--flix-font-weight-semibold: 500; 
--flix-font-weight-bold: 700; 
--flix-brand-primary-color: #73d700; 
--flix-brand-secondary-color: #ffad00; 
--flix-ui-primary-color: #73d700; 
--flix-ui-primary-light-color: #44b300; 
--flix-ui-primary-dark-color: #cef38d; 
--flix-grayscale-0-color: #252525; 
--flix-grayscale-10-color: #353535; 
--flix-grayscale-30-color: #444; 
--flix-grayscale-50-color: #646464; 
--flix-grayscale-70-color: #8b8b8b; 
--flix-grayscale-90-color: #c8c8c8; 
--flix-grayscale-100-color: #fff; 
--flix-neutral-color: #039fd5; 
--flix-success-color: #44b300; 
--flix-success-dark-color: #cef38d; 
--flix-warning-color: #ff8206; 
--flix-warning-dark-color: #ffe393; 
--flix-danger-color: #fd5a5a; 
--flix-danger-dark-color: #ffc9ce; 
--flix-bg-primary-color: #252525; 
--flix-bg-primary-transparent-color: rgba(53, 53, 53, 0.88); 
--flix-bg-secondary-color: #202020; 
--flix-box-bg-color: #353535; 
--flix-highlight-color: #136b00; 
--flix-overlay-bg-color: rgba(0, 0, 0, 0.5); 
--flix-focus-outline-color: #016ae7; 
--flix-content-primary-color: #fff; 
--flix-content-secondary-color: #c8c8c8; 
--flix-heading-font-color: #fff; 
--flix-link-color: #3bd0de; 
--flix-line-primary-color: #646464; 
--flix-icon-primary-color: #fff; 
--flix-icon-secondary-color: #73D700; 
--flix-box-shadow-color: rgba(0, 0, 0, 0.18); 
--flix-box-shadow-subtle-color: rgba(0, 0, 0, 0.06); 
--flix-button-primary-color: #a2e53f; 
--flix-button-label-color: #353535; 
--flix-header-bg-color: #0f5900; 
--flix-header-color: #fff; 
--flix-header-nav-bg-color-tablet: #0b4000; 
--flix-input-border-color: #c8c8c8; 
--flix-input-height-mobile: 44px; 
--flix-input-height-desktop: 36px; 
--flix-spacing-1: 6px; 
--flix-spacing-2: 12px; 
--flix-spacing-3: 18px; 
--flix-spacing-4: 24px; 
--flix-spacing-5: 30px; 
--flix-spacing-6: 36px; 
--flix-spacing-7: 42px; 
--flix-spacing-8: 48px; 
--flix-spacing-9: 54px; 
--flix-spacing-10: 60px; 
--flix-spacing-11: 66px; 
--flix-spacing-12: 72px; 
--flix-spacing-half: 3px; 
--flix-page-min-width: 320px; 
--flix-page-max-width: 1200px; 
--flix-font-size-primary: 1rem; 
--flix-font-size-small: 0.875rem; 
--flix-font-size-fineprint: 0.75rem; 
--flix-font-size-h1: 1.7rem; 
--flix-font-size-h2: 1.3rem; 
--flix-font-size-h3: 1.1rem; 
--flix-font-size-h4: 1rem; 
--flix-line-height-primary: 1.5rem; 
--flix-line-height-small: 1.125rem; 
--flix-line-height-fineprint: 0.938rem; 
--flix-line-height-h1: 2rem; 
--flix-line-height-h2: 1.7rem; 
--flix-line-height-h3: 1.5rem; 
--flix-line-height-h4: 1.5rem; 
--flix-hover-layer-color: linear-gradient(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.12)); 
--flix-pressed-layer-color: linear-gradient(rgba(0, 0, 0, 0.24), rgba(0, 0, 0, 0.24)); 
--flix-disabled-element-opacity: 0.5; 
--flix-primary-border-radius: 6px; 
--flix-primary-box-shadow: 0px 6px 12px rgba(0, 0, 0, .06), 0px 3px 18px rgba(0, 0, 0, .06), 0px 3px 6px rgba(0, 0, 0, .18); 
--flix-color-scheme: dark; 
--flix-font-family-primary: Roboto, Arial, sans-serif; 
--flix-font-weight-normal: 400; 
--flix-font-weight-semibold: 500; 
--flix-font-weight-bold: 700;