Themes

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. It is also recommended to put this code directly into into the HTML code to load faster (no additional requests).

<script>
  function getTheme() {
    const isDarkModeEnabledViaCss = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
    const currentTheme = localStorage.getItem('theme');
    const isDark = currentTheme ? currentTheme === 'dark' : isDarkModeEnabledViaCss;
    return isDark;
  }
  function setTheme(enableDark) {
    document.documentElement.setAttribute('theme', enableDark ? 'dark' : 'light');
    localStorage.setItem('theme', enableDark ? 'dark' : 'light');
  }
  const currentState = getTheme();
  setTheme(currentState);
</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 a class of `btn-switch-theme`. 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
  function getTheme() {
    const isDarkModeEnabledViaCss = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
    const currentTheme = localStorage.getItem('theme');
    const isDark = currentTheme ? currentTheme === 'dark' : isDarkModeEnabledViaCss;
    return isDark;
  }

  function setTheme(enableDark) {
    document.documentElement.setAttribute('theme', enableDark ? 'dark' : 'light');
    localStorage.setItem('theme', enableDark ? 'dark' : 'light');
  }

  function updateDarkModeButtonState(isCurrentlyDarkModeEnabled) {
    const element = document.querySelector('.btn-switch-theme');
    element.classList.remove('is-dark');
    if (isCurrentlyDarkModeEnabled) element.classList.add('is-dark');
    element.querySelector('span').innerText = isCurrentlyDarkModeEnabled ? 'light_mode' : 'dark_mode';
    element.title = 'Switch to ' + (isCurrentlyDarkModeEnabled ? 'light' : 'dark') + ' mode';
  }

  // Init Theme and Button
  const darkModeButton = document.querySelector('.btn-switch-theme');
  darkModeButton.addEventListener('click', (e) => {
    e.preventDefault();
    const nextState = !getTheme(); // toggle
    setTheme(nextState);
    updateDarkModeButtonState(nextState);
  });
  const currentState = getTheme();
  setTheme(currentState);
  updateDarkModeButtonState(currentState);

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 tags.

Deprecated in 2.1.0! Use the Material M3 Variables instead to create a custom Theme!

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);
  --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;
}