Cannot apply custom color to Menu in Semantic UI

Question

As the title says, I have been unable to correctly apply a custom color to a menu in Semantic UI. I have scoured the internet for tutorials, guides, including the Semantic UI page. The only things I have been able to find are people able to successfully apply custom colors to buttons, or people utilizing the default colors defined by Semantic UI for the menu.

<div class="ui fluid container">
    <div class="ui segment attached">
        <h1 class="ui header item">CONTERACT</h1>
    </div>
</div>
<div class="ui fluid container">
    <div class="ui primary attached four item inverted menu">
        <a href="" class="brand item">Project Name</a>
        <a href="" class="active item">Link</a>
        <a href="" class="item">Link</a>
        <a href="" class="item">Link</a>
    </div>
</div>

I have defined the particular color I want as @primaryColor, and this works on a button, just as an experiment, but does not work on the menu. I have also tried to override a default color in site.override with no success. I am under the suspicion that you may not be able to use a custom color with a menu in Semantic UI, but that is also hard to believe considering that defeats the customization aspect.

    /**
     User Global Variables
**/
@primaryColor: #fabd42

Answer 1

The documentation for coloured menus can be found here and from looking at the source code in the examples we can see that to change out a colour a single-use class is used, e.g red makes the menu red:

<div class="ui red three item menu"></div>

And to set red as the background colour (instead of text colour) the inverted class is added, e.g:

<div class="ui red inverted three item menu"></div>

That indicates that we need to identify where these single-use colour classes are defined and add our own. Searching the source code via GitHub for menu inverted orange we can find that these are defined in menu.less like this:

/* Orange */
.ui.inverted.menu .orange.active.item,
.ui.inverted.orange.menu {
  background-color: @orange;
}
.ui.inverted.orange.menu .item:before {
  background-color: @invertedColoredDividerBackground;
}
.ui.inverted.orange.menu .active.item {
  background-color: @invertedColoredActiveBackground !important;
}

Therefore to add your own background colour for a menu you need to define a background colour class in the same way, e.g:

/* Peach */
.ui.inverted.menu .peach.active.item,
.ui.inverted.peach.menu {
  background-color: @peach;
}
.ui.inverted.peach.menu .item:before {
  background-color: @invertedColoredDividerBackground;
}
.ui.inverted.peach.menu .active.item {
  background-color: @invertedColoredActiveBackground !important;
}

Then you need to add the peach colour, which can be set in site.variables, e.g:

/*---  Colors  ---*/
@peach            : #FABD42;

You're done! You've added your own colour (peach) and made it available as a background menu colour. The final step is to add the colour class to your menu along with inverted to set it as the background colour, e.g:

<div class="ui peach inverted primary attached four item menu">

</div>