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",
}
Last modified 1yr ago