Changing left menu colors

Prerequisite: You must be familiar with the Syntax used in Tutorials and have already created an extension.

It is possible with the ITSM Designer (or an XML extension) to change the colors used to display the left menus in the iTop Console, to align it to your company color codes.

This picture describe which part of the menu is controlled by which variable:

Insert this code in an extension

itop_design / branding / themes /theme@fullmoon

<variables>
<!-- Main menu (icon uses the same color as the text) -->
    <variable id="ibo-navigation-menu--body--background-color" _delta="define">$ibo-color-white-100</variable>
    <variable id="ibo-navigation-menu--body--text-color" _delta="define">$ibo-color-blue-800</variable>
 
<!-- Main menu on-hover (background & text) -->
    <variable id="ibo-navigation-menu--action--background-color--on-hover" _delta="define">$ibo-color-blue-100</variable>
    <variable id="ibo-navigation-menu--action--text-color--on-hover" _delta="define">$ibo-color-blue-700</variable>
 
<!-- Main menu on-active (icon & text) -->
    <variable id="$ibo-navigation-menu--menu-group-title--text-color--is-active" _delta="define">$ibo-color-blue-700</variable>
    <variable id="$ibo-navigation-menu--menu-group-icon--text-color--is-active" _delta="define">$ibo-color-blue-500</variable>
 
<!-- Sub-menu (text menu-group, numbers & hover background) -->
    <variable id="ibo-navigation-menu--menu-node--background-color" _delta="define">$ibo-color-blue-100</variable>
    <variable id="ibo-navigation-menu--menu-node--text-color" _delta="define">$ibo-color-blue-900</variable>
 
<!-- Bottom menu (below user icon) -->          
    <variable id="ibo-navigation-menu--bottom-part--background-color" _delta="define">$ibo-color-grey-100</variable>
    <variable id="ibo-navigation-menu--user--text-color" _delta="define">$ibo-color-blue-800</variable>
    <variable id="ibo-navigation-menu--user-organization--text-color" _delta="define">$ibo-color-blue-600</variable>
</variables>
 
<!-- No visible effect ??? -->
<variables>
    <variable id="ibo-navigation-menu--action-icon--text-color--on-hover" _delta="define">$ibo-color-red-300</variable>
    <variable id="ibo-navigation-menu--user-picture--background-color" _delta="define">$ibo-color-cyan-300</variable>
    <variable id="ibo-navigation-menu--action--background-color--on-active" _delta="define">$ibo-color-orange-300</variable>
</variables>

or paste this in the ITSM Designer