Top

Layout Mode

No need to change any tsx or scss files.

If you want to change layout to dark mode you need to add dark class with your body tag 

<body class="dark">
</body>

We have provided a bunch of page layouts and menu layouts that can be implemented with just a options change to "body" ! Please refer the below details.

If you want to change layout type for the all pages you have to set value in onClick settings 

setTemplateLayoutData: (state, action) => {
  Config.sidebar_layout = action.payload;
  if(action.payload === ""){
    document.body.classList.remove("dark-sidebar","dark","colorfull");
  }else if(action.payload === "dark-sidebar"){
    document.body.classList.add("dark-sidebar");
    document.body.classList.remove("dark","colorfull");
  }else if(action.payload === "dark"){
    document.body.classList.add("dark");
    document.body.classList.remove("dark-sidebar","colorfull");
  }else{
    document.body.classList.add("colorfull");
    document.body.classList.remove("dark-sidebar","dark");
  }
  state.templateLayout = state.templateLayout.map((item) => (item.layoutValue === action.payload ? { ...item, active: true } : { ...item, active: false }));
},

find TemplateCustomizer folder and change above value bark

Layout Mode page

layout