Menu Color Theme

To set the new color theme of left sidebar, you need to update the following param in the file src/@crema/utility/AppContextProvider/defaultConfig.js

To set the new color theme of left sidebar, you need to update the following param in the file src/@crema/utility/AppContextProvider/defaultConfig.js

const defaultConfig = {
  sidebar: {
    borderColor: "#757575",
    menuStyle: MenuStyle.DEFAULT,
    isSidebarBgImage: false,
    sidebarBgImage: 1,
    colorSet: LightSidebar, //Color set
  },
  ...
}

In the sidebar object, we have a colorSet object of sidebar theme configuration.

export const DarkSidebar: SidebarData = {
  sidebarBgColor: "#313541",
  sidebarTextColor: "#fff",
  sidebarHeaderColor: "#313541",
  sidebarMenuSelectedBgColor: "#F4F7FE",
  sidebarMenuSelectedTextColor: "rgba(0, 0, 0, 0.87)",
  mode: ThemeMode.DARK,
};
export const LightSidebar: SidebarData = {
  sidebarBgColor: "#fff",
  sidebarTextColor: "rgba(0, 0, 0, 0.60)",
  sidebarHeaderColor: "#fff",
  sidebarMenuSelectedBgColor: "#F4F7FE",
  sidebarMenuSelectedTextColor: "rgba(0, 0, 0, 0.87)",
  mode: ThemeMode.LIGHT,
};

If we want to enable the sidebar background image we need to set isSidebarBgImage: true. If we need to change the image of the backgroung then we need to update the sidebarBgImages object in the src/@crema/services/db/navigationStyle.js.

export const sidebarBgImages = [
  ...
  {
    id: 1,
    image: "/assets/images/sidebar/thumb/1.png",
  },
  ...
];

In case you want to change the selected menu style then you need to update menuStyle.

const defaultConfig = {
  sidebar: {
    ...
    menuStyle: MenuStyle.DEFAULT, // Update the it's value.
    ...
  },
  ...
}

Here is the menu style other option.

export enum MenuStyle {
  DEFAULT = "default",
  STANDARD = "standard",
  ROUNDED = "rounded",
  ROUNDED_REVERSE = "rounded-reverse",
  CURVED_MENU = "curved-menu",
}