Using this tutorial we are going to explain everything that is needed to change the colour of the Rosemary theme.
This tutorial has three steps, starting with changing the general colour.
The available colours are (see /ui/style/_admin-lte-skins/
):
Each colour also has a 'light' version, changing the visuals of the menu:
In /public/views/index.html
change the body class to the desired value, for example:
<body class="skin-yellow sidebar-mini control-sidebar-open">
Or, for the light version:
<body class="skin-yellow-light sidebar-mini control-sidebar-open">
In /public/views/directives/activity_sidebar.html
change the sidebar class to the desired value (i.e. dark or light):
<aside class="control-sidebar control-sidebar-dark visible-lg">
or
<aside class="control-sidebar control-sidebar-light visible-lg">
In /ui/style/app.less
change @theme-color
to the desired value, possible values are:
- For black:
#000000
- For blue:
@light-blue
- For green:
@green
- For purple:
@purple
- For red:
@red
- For yellow:
@yellow