Themes

Materialize is a modern responsive CSS framework based on Material Design by Google.

Materialize supports themeing. Most commonly there is a light and a dark mode theme. You also can customize your own individual theme too. Here is an example for an easy theme-switch.

Reading Theme Setting

Make sure you include this short code snippet before the </head> tag.

It has to be loaded as soon as possible (therefore put it as first script) to avoid flickering of the page. Also it is recommended to directly write it into the HTML code, then it is also faster (no additional request). 

<script>
  const theme = localStorage.getItem('theme');
  if (theme) document.documentElement.setAttribute('theme', theme);
</script>

This Script loads the users settings from the local storage and sets a parameter which can be then used to set variables in the CSS.

Changing Theme Setting

The Theme can be switched instantly via click of a button.

The following example binds a Theme-Switching Function to an HTML-Element, which has an Id of #theme-switch. To test this, you can click on the moon or the sun icon at this page in the top-right corenr to see it in action! 

  // Change Theme Setting with a Switch
  const currentTheme = localStorage.getItem('theme');
  const switchElem = document.querySelector('#theme-switch');

  const setTheme = (isDark) => {
    if (isDark) {
      switchElem.classList.add('is-dark');
      switchElem.querySelector('i').innerText = 'light_mode';
      switchElem.title = 'Switch to light mode';
    }
    else {
      switchElem.classList.remove('is-dark');
      switchElem.querySelector('i').innerText = 'dark_mode';
      switchElem.title = 'Switch to dark mode';
    }
  }

  if (switchElem) {
    // Load
    if (currentTheme) setTheme(true);
    // Change
    switchElem.addEventListener('click', e => {
      e.preventDefault();
      if (!switchElem.classList.contains('is-dark')) {
        // Dark Theme
        document.documentElement.setAttribute('theme', 'dark');
        localStorage.setItem('theme', 'dark');
        setTheme(true);
      }
      else {
        // Light Theme
        document.documentElement.removeAttribute('theme');
        localStorage.removeItem('theme');
        setTheme(false);
      }
    });
  }

Creating a Theme

To create or overwrite a theme, you have to set the variables of the Theme. This variables can be defined in a seperate CSS-File and included before the Materialize-CSS File inside of the <head></head> tags.

Here is an example of the standard Dark-Theme:

:root[theme='dark'] {
    --background-color: #121212;
    --surface-color: #242424;

    --font-color-main: rgba(255, 255, 255, 0.87);
    --font-color-medium: rgba(255, 255, 255, 0.60);
    --font-color-disabled: rgba(255, 255, 255, 0.38);

    --font-on-primary-color-main: rgba(0, 0, 0, 0.87);
    --font-on-primary-color-dark-main: rgba(255, 255, 255, 0.87);
    --font-on-primary-color-dark-medium: rgba(255, 255, 255, 0.60);
    --font-on-primary-color-medium: rgba(0, 0, 0, 0.56);
    --font-on-primary-color-disabled: rgba(0, 0, 0, 0.38);

    --hover-color: rgba(255, 255, 255, 0.04);
    --focus-color: rgba(255, 255, 255, 0.12);
    --focus-color-solid: #424242;

    --background-color-disabled: rgba(255, 255, 255, 0.12);
    --background-color-level-4dp: rgba(255, 255, 255, 0.09);
    --background-color-level-16dp-solid: #262626;
    --background-color-card: var(--surface-color);
    --background-color-slight-emphasis: rgba(255, 255, 255, 0.05);

    --separator-color: #424242; /* borders between components */

    --error-color: #CF6679;

    --slider-track-color: rgba(255, 255, 255, 0.26);
    --switch-thumb-off-color: #bababa;

    --primary-color: #B39DDB;
    --primary-color-dark: #9575CD;
    --primary-color-numeric: 179, 157, 219;
    --primary-color-raised-hover-solid: #C2ACEA;
    --primary-color-raised-focus-solid: #DBC5FF;

    --secondary-color: #CDDC39;
    --secondary-color-hover-solid: #DCEB48;
    --secondary-color-focus-solid: #F5FF61;
    --secondary-container-color: #B39DDB;
    --font-on-secondary-container-color: rgba(255, 255, 255, 0.87);

    --md_sys_color_on-surface: 230, 225, 229;
}