Get 2025 Templates Mega Bundle!$1000 worth of 19 Bootstrap HTML, Vue & React Templates + 3 Vector Sets for just $99
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
Replies (1)
Hi,
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:
/angular/demo1/src/app/pages/routing.ts
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.Thanks
