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>
    #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( "#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.