Themes

Choosing default themes

There are a few themes(skins) for sidebar and navbar.

By default sidebar-light and navbar-blue themes are included in ace.css .
In demo when you choose a different theme from settings box , ace-themes.css is loaded.

But if you want to use a theme in your app other than the default ones, it's recommended to compile ace.css using your chosen theme(s).
You should not use ace-themes.css because it is a large file as it contains all sidebar and navbar themes.

Open scss/ace-default-themes.scss and add or remove the theme(s) you want.

👉 Note: For Dark Colored Sidebars such as .sidebar-purple you should include and compile both sidebar-color and the sidebar you want. (Except for .sidebar-dark and .sidebar-dark2)

$my-navbar-themes: (
    "blue": $navbar-blue
);

$my-sidebar-themes: (
    "white": $sidebar-white
);

$my-sidebar-themes: (
    "dark": $sidebar-dark
);

// OR if you want a dark sidebar like *sidebar-purple*
$my-sidebar-themes: (
    "color": $sidebar-color, // sidebar-color should be included as well
    "purple": $sidebar-purple
);

Then rebuild ace.css

And in your HTML change navbar and sidebar theme like this:

<div id="navbar" class="navbar navbar-blue navbar-fixed">
 <!-- navbar content -->
</div>

<div id="sidebar" class="sidebar sidebar-color sidebar-blue sidebar-fixed expandable">
 <!-- sidebar content -->
</div>

Sidebar

Sidebar Colors

Sidebar themes are as follows:

Light colors

• light which is the default sidebar theme in ace.css and used in Dashboard and most pages
• white , white2 , white3 , white4
• lightblue , lightblue2 , lightpurple . These are used along with .sidebar-spaced

Dark colors

• dark
• dark2
• blue
• cadetblue
• darkblue
• darkcrimson
• darkslateblue
• darkslategrey
• green
• plum
• purple
• steelblue
• gradient1
• gradient2
• gradient3
• gradient4

After you rebuild ace.css using your chosen theme as mentioned above, you can use it like this:

<div id="sidebar" class="sidebar sidebar-white"> ... </div>
<div id="sidebar" class="sidebar sidebar-lightblue"> ... </div>
<div id="sidebar" class="sidebar sidebar-color sidebar-dark"> ... </div>
<div id="sidebar" class="sidebar sidebar-color sidebar-teal"> ... </div>

Customizing And Editing

If you want to change the colors and other values of a specific theme, you should edit scss/_sidebar-themes-variables.scss

You can customize each theme to change its colors or other features.
Many themes are extended from another theme. For example sidebar-white is extended from sidebar-light.

👉 Some of the options are:

border-color and shadow : some sidebars have a border on right (for example white sidebars), some have a shadow (for example the light sidebar), some have none (for example dark sidebars) .

With a shadow you can have the .active element cover the shadow by setting shadow-padding to 1px (or more) and result is like this:

But it's not possible with a border. So if you want a border and not a shadow:

Then you should modify your theme values (in _sidebar-themes-variables.scss) like this:

$sidebar-light: map-merge($sidebar-light-base, (
    'background-color': #f1f3f5,
    'border-color': #dbdfe2,
    'shadow': null,
    ....
));

However when active item covers sidebar's shadow in collapsed mode, it sometimes doesn't look good. And you can fix that by adding the following theme variable:

$sidebar-light: map-merge($sidebar-light-base, (
    'background-color': #f7f7f7,
    'border-color': null,
    'shadow': (inset -1px 0 0 0 #dbdfe2),
    'shadow-padding': 1px,
    'shadow-padding-collapsed-disabled': true,
	// OR
	'shadow-padding-collapsed-active-on-right': true,//will show the active highligh border on right, when sidebar is collapsed and hovered
    ....
));

or when active item highlight is on right: (Explained in Sidebar Nav Options)

<div id="sidebar" class="sidebar sidebar-white">
  <div class="sidebar-inner shadow-sm">
      ...
  </div>
</div>

item-border-color : adds a border between sidebar items. Can be used with item-border-margin to specify distance from sides

submenu-bullets disables or changes submenu bullets for a theme:

• null disables it
• 1 only shows it on hover
• 2 only shows when item is .active
• 3 shows it both on hover and when .active
• set submenu-bullet-style to caret to change it from circle to triangle

$sidebar-purple: (
    ...
    'submenu-bullets': 1,
    'submenu-bullet-style': caret  
    ...
);

link-hover-highlight-border . Sidebar link (A.nav-link) border when hovered. null disables it:

link-active-highlight-border . Sidebar link (A.nav-link) border when .active:

item-active-highlight-border . Sidebar item (LI.nav-item) border when .active:

submenu-tree-border . If true submenu items will have tree like borders. Similar to previous image.

In Ace's demo, when you change sidebar theme, some of the elements such as shortcut buttons are also changed.
These changes are not part of the theme. Instead their relevant class names are changed:

Here for example the search icon's class name is changed from text-info to text-orange-l2 to match the selected sidebar theme

Navbar

Navbar Colors

Navbar theming options are as follows:

Light colors

• white , white2
• light
• lightblue
• lightpurple
• lightgreen
• lightgrey

Dark colors

• dark
• blue. It's the default navbar color included in ace.css and used in Dashboard and most pages
• darkblue
• skyblue
• cadetblue
• purple
• plum
• teal
• green
• darkgreen
• orange
• brown
• slategrey
• secondary

If you want to change the colors and other values of a theme, you should edit scss/_navbar-themes-variables.scss

Then you should rebuild ace.css using your chosen theme and use it like this:

<div class="navbar navbar-white"> ... </div>

<div class="navbar navbar-lightblue"> ... </div>

<div class="navbar navbar-purple"> ... </div>

<a href="#" class="dropdown-toggle nav-link pl-lg-3 pr-lg-4">
    ...
</a>

<a href="#" class="dropdown-toggle btn btn-warning px-lg-3 d-none d-lg-flex">
    ...
</a>

<!-- Show the "orange" button in large screens -->
<a href="#" class="dropdown-toggle btn btn-warning px-lg-3 d-none d-lg-flex">
    ...
</a>
<!-- 
    And in small devices show a normal ".nav-link"
    and place an "orange" icon inside it   
-->
<a href="#" class="dropdown-toggle nav-link d-lg-none">    
    <i class="fa fa-bell icon-animated-bell 
        btn-warning radius-round w-4 h-4 text-center pt-2 text-110">
    </i>
    ...
</a>

Body

There are some background image options for body element. They are visible only in boxed layout
The following are available:

• body-img1
• body-img2

<body class="body-img1">
...
</body>

Content Area

Content area has a lightgrey background color by default. If you want another color for background such as "White" (as seen in default Dashboard and most pages), you can do it like this:

<div class="main-container bgc-white">
  ...
</div>
<!-- or other color -->
<div class="main-container bgc-secondary-l4">
  ...
</div>

If you want to use a custom background color for content area and you have sidebar arrows that point to .active item:

you should make sure to add the following rule in your CSS so that the arrow color matches content area background:

.sidebar .nav.has-active-arrow .nav-item.active > .nav-link::after {
    border-right-color: #eee; /* put the new content background color here */
}