Custom colors introduction

If you want to use different colors for your menu, you can easily create a new .css file generated by SCSS. But before doing so, try using the "themes" extension.

To create a customized color scheme as a default for all your menus, you can override the default SCSS variables.

To create a customized color scheme in addition to other menus, start off by creating a new (empty) .scss file. Next, @import the "import" .scss file and @include the "mm_colors" mixin.

/* in custom-menu.scss */
@import "path/to/src/css/_imp/import";
@include mm_colors( /* arguments */ );

Now all you need to do, is run Sass from the command line.

sass path/to/custom-menu.scss path/to/custom-menu.css

Arguments for the mm_colors mixin

Mixin( arguments ) Default value Datatype Description
1 The $class argument is not a classname but a CSS selector, therefor you must include the preceding dot. If not an empty string, make sure to add the specified classname to the extensions option when firing the plugin.
2 For the actual value, the datatype and a description, have a look at the default variable values reference.
mm_colors Include this mixin to create a custom color scheme for the menu.
$class 1 "" String The classname to add to the CSS selectors. If left empty, the new CSS rules will override the default settings.
$backgroundColor $mm_backgroundColor 2
$textColor $mm_textColor 2
$dimmedTextColor $mm_dimmedTextColor 2
$emphasizedBackgroundColor $mm_emphasizedBackgroundColor 2
$highlightedBackgroundColor $mm_highlightedBackgroundColor 2
$borderColor $mm_borderColor 2
$navbarColor $mm_navbarColor 2

Custom colors for add-ons and extensions

Every add-on and extension that uses colors, has its own mixin(s) you can @include to change its colors. For example, if you're using only the "searchfield" add-on.

/* in custom-menu.scss */
@import "path/to/src/css/_imp/import";
@include mm_colors( /* arguments */ );
@include mm_colors_searchfield( /* arguments */ );

If you're looking for the mixin(s) for an add-on or extension, check the add-ons and extensions pages.