Skip to content

Latest commit

 

History

History
61 lines (43 loc) · 1.63 KB

change-color.md

File metadata and controls

61 lines (43 loc) · 1.63 KB

How to change the theme color

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:

Step 1

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">

Step 2

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">

Step 3

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