Theme Settings
1. How to set default settings ?
// ----------------------------------------------------
// File: src/context/config.ts
// ----------------------------------------------------
const config = {
activeDir: "ltr", // This can be ltr or rtl
activeMode: "light", // This can be light or dark
activeTheme: "BLUE_THEME", // BLUE_THEME, GREEN_THEME, AQUA_THEME, PURPLE_THEME, ORANGE_THEME
activeLayout: "vertical", // This can be vertical or horizontal
isLayout: "boxed", // This can be full or boxed
isSidebarHover: false,
isCollapse:"full-sidebar",
isLanguage: "en",
isCardShadow: true,
isMobileSidebar: false,
isHorizontal: false,
isBorderRadius: 12,
sidebarWidth: 320,
miniSidebarWidth: 87,
topbarHeight: 70,
};
2. How to set right-to-left (RTL) settings ?
// ----------------------------------------------------
// File: src/context/config.ts
// ----------------------------------------------------
const config = {
activeDir: "rtl", // change is here
activeMode: "light",
activeTheme: "BLUE_THEME",
activeLayout: "vertical",
isLayout: "boxed",
isSidebarHover: false,
isCollapse:"full-sidebar",
isLanguage: "en",
isCardShadow: true,
isMobileSidebar: false,
isHorizontal: false,
isBorderRadius: 12,
sidebarWidth: 320,
miniSidebarWidth: 87,
topbarHeight: 70,
};
3. How to set Dark theme ?
// ----------------------------------------------------
// File: src/context/config.ts
// ----------------------------------------------------
const config = {
activeDir: "ltr",
activeMode: "dark", // change is here
activeTheme: "BLUE_THEME",
activeLayout: "vertical",
isLayout: "boxed",
isSidebarHover: false,
isCollapse:"full-sidebar",
isLanguage: "en",
isCardShadow: true,
isMobileSidebar: false,
isHorizontal: false,
isBorderRadius: 12,
sidebarWidth: 320,
miniSidebarWidth: 87,
topbarHeight: 70,
};
4. How to change color theme ?
// ----------------------------------------------------
// File: src/context/config.ts
// ----------------------------------------------------
const config = {
activeDir: "ltr",
activeMode: "light",
activeTheme: "GREEN_THEME", // change is here // BLUE_THEME, GREEN_THEME, AQUA_THEME, PURPLE_THEME, ORANGE_THEME
activeLayout: "vertical",
isLayout: "boxed",
isSidebarHover: false,
isCollapse:"full-sidebar",
isLanguage: "en",
isCardShadow: true,
isMobileSidebar: false,
isHorizontal: false,
isBorderRadius: 12,
sidebarWidth: 320,
miniSidebarWidth: 87,
topbarHeight: 70,
};
5. How to set Horizontal layout ?
// ----------------------------------------------------
// File: src/context/config.ts
// ----------------------------------------------------
const config = {
activeDir: "ltr",
activeMode: "light",
activeTheme: "BLUE_THEME",
activeLayout: "horizontal", // change is here
isLayout: "boxed",
isSidebarHover: false,
isCollapse:"full-sidebar",
isLanguage: "en",
isCardShadow: true,
isMobileSidebar: false,
isHorizontal: false,
isBorderRadius: 12,
sidebarWidth: 320,
miniSidebarWidth: 87,
topbarHeight: 70,
};
6. How to set Fullwidth layout ?
// ----------------------------------------------------
// File: src/context/config.ts
// ----------------------------------------------------
const config = {
activeDir: "ltr",
activeMode: "light",
activeTheme: "BLUE_THEME",
activeLayout: "vertical",
isLayout: "full", // change is here
isSidebarHover: false,
isCollapse:"full-sidebar",
isLanguage: "en",
isCardShadow: true,
isMobileSidebar: false,
isHorizontal: false,
isBorderRadius: 12,
sidebarWidth: 320,
miniSidebarWidth: 87,
topbarHeight: 70,
};
7. How to set Boxed layout ?
const config = {
activeDir: "ltr",
activeMode: "light",
activeTheme: "BLUE_THEME",
activeLayout: "vertical",
isLayout: "boxed", // change is here
isSidebarHover: false,
isCollapse:"full-sidebar",
isLanguage: "en",
isCardShadow: true,
isMobileSidebar: false,
isHorizontal: false,
isBorderRadius: 12,
sidebarWidth: 320,
miniSidebarWidth: 87,
topbarHeight: 70,
};
8. How to set Minisidebar ?
// ----------------------------------------------------
// File: src/context/config.ts
// ----------------------------------------------------
const config = {
activeDir: "ltr",
activeMode: "light",
activeTheme: "BLUE_THEME",
activeLayout: "vertical",
isLayout: "boxed",
isSidebarHover: false,
isCollapse:"mini-sidebar", // change is here
isLanguage: "en",
isCardShadow: true,
isMobileSidebar: false,
isHorizontal: false,
isBorderRadius: 12,
sidebarWidth: 320,
miniSidebarWidth: 87,
topbarHeight: 70,
};
9. How to set card with shadow ?
// ----------------------------------------------------
// File: src/context/config.ts
// ----------------------------------------------------
const config = {
activeDir: "ltr",
activeMode: "light",
activeTheme: "BLUE_THEME",
activeLayout: "vertical",
isLayout: "boxed",
isSidebarHover: false,
isCollapse:"full-sidebar",
isLanguage: "en",
isCardShadow: true, // change is here
isMobileSidebar: false,
isHorizontal: false,
isBorderRadius: 12,
sidebarWidth: 320,
miniSidebarWidth: 87,
topbarHeight: 70,
};
10. How to set card with border ?
// ----------------------------------------------------
// File: src/context/config.ts
// ----------------------------------------------------
const config = {
activeDir: "ltr",
activeMode: "light",
activeTheme: "BLUE_THEME",
activeLayout: "vertical",
isLayout: "boxed",
isSidebarHover: false,
isCollapse:"full-sidebar",
isLanguage: "en",
isCardShadow: false, // change is here
isMobileSidebar: false,
isHorizontal: false,
isBorderRadius: 12,
sidebarWidth: 320,
miniSidebarWidth: 87,
topbarHeight: 70,
};
11. How to set theme border radius ?
// ----------------------------------------------------
// File: src/context/config.ts
// ----------------------------------------------------
const config = {
activeDir: "ltr",
activeMode: "light",
activeTheme: "BLUE_THEME",
activeLayout: "vertical",
isLayout: "boxed",
isSidebarHover: false,
isCollapse:"full-sidebar",
isLanguage: "en",
isCardShadow: true,
isMobileSidebar: false,
isHorizontal: false,
isBorderRadius: 12, // change is here
sidebarWidth: 320,
miniSidebarWidth: 87,
topbarHeight: 70,
};