Themes introduction

The default color theme for the menu is light gray (#f3f3f3). Because the menu uses CSS variables combined with semi-transparent black and white shades, the menu is easily themeable. All you need to do, is change some CSS variables for the menu.

<style>
    #my-menu {
        --mm-color-background: #fec;
    }
</style>

To apply a different theme to the menu, for example to accommodate a dark background color, add the preferred theme name to the extensions option.

<script>
    document.addEventListener(
        "DOMContentLoaded", () => {
            new Mmenu( "#my-menu", {
                extensions: ["theme-dark"]
            });
        }
    );
</script>

Example

Give it a go, change the options below and see how it affects the menu.

  • Apply the "light" theme to the menu (default).
  • Apply the "dark" theme to the menu.
  • Apply the "white" theme to the menu.
  • Apply the "black" theme to the menu.
<script>
    document.addEventListener(
        "DOMContentLoaded", () => {

        }
    );
</script>

Available themes

theme-light (default)
A light gray background with semi-transparent black and white shades.
theme-dark
A dark gray background with semi-transparent black and white shades.
theme-black
A black background with semi-transparent white shades.
theme-white
A white background with semi-transparent black shades.

CSS variables for the "themes" extension

The "themes" extension has no CSS variables, instead it redefines the already preset CSS variables.

SCSS variables for the "themes" extension

Variable Datatype Default value Description
Include CSS
$mm_include_themes Boolean true Whether or not to include CSS for the themes extension throughout the entire CSS framework.
$mm_include_themes_white Boolean $mm_include_themes Whether or not to include CSS for the white theme throughout the entire CSS framework.
$mm_include_themes_dark Boolean $mm_include_themes Whether or not to include CSS for the dark theme throughout the entire CSS framework.
$mm_include_themes_black Boolean $mm_include_themes Whether or not to include CSS for the black theme throughout the entire CSS framework.

Next extension:
Tileview