Get 2024 Templates Mega Bundle!14 Bootstrap, Vue & React Templates + 3 Vector Sets
Get for 99$

Sidebar color Metronic Angular Demo1

Hi Metronic staff

on Metronic Angular Demo1 v8.2.0

sidebar has DarkColor on Dashboard page, even when the scheme selected is Light Theme

what should I change to make the sidebar Light on the Dashboard screen?

I only want sidebar dark in case the scheme selected is Dark Theme

In short, I would like Dashboard screen behave like other components

Text formatting options

Replies (2)


You'll need to modify the routing configuration and apply different layouts based on the theme scheme. The key is to conditionally apply layout data to routes, so the sidebar color can be adjusted accordingly.

Here's how you can modify the routing configuration in your Routing file:


import { Routes } from "@angular/router";

const Routing: Routes = [
// ... other routes

path: "dashboard",
loadChildren: () =>
import("./dashboard/dashboard.module").then((m) => m.DashboardModule),
data: { layout: "light-sidebar" }, // Apply light sidebar layout

// ... other routes

path: "",
redirectTo: "/dashboard",
pathMatch: "full",
path: "**",
redirectTo: "error/404",

export { Routing };

In the above code, for the dashboard route, you've added the data property with the value { layout: 'light-sidebar' }. This means that when the route is loaded, the sidebar layout with a light background will be applied.


Use Layout Services and CSS Classes (Recommended)

Import LayoutService:
import { LayoutService } from '@incredibox Medtronic/admin/core';

Include LayoutService in your Dashboard component:
constructor(private layout service: LayoutService) {}

Access the current topic map:
const currentTheme = this.layout service.getTheme();

Apply conditional CSS classes in your component template:
<div class="kt-aside" [ngClass]="{ 'kt-aside--dark': currentTheme === 'dark' }">
This snippet kt-aside--dark automatically adds the class to the sidebar element only if the current theme is dark.

Text formatting options
Text formatting options