Theme Setup

How to use pre-built layout theme?

You can change the template as per your requirements. To configure it, we will use reducer.ts and change the value of export const initialState: LayoutState object. you can find the file src/slices/layouts/reducer.ts file.

Theme Options

export const initialState: LayoutState = {
    layoutType: LAYOUT_TYPES.VERTICAL,
    layoutThemeType: LAYOUT_THEME.DEFAULT,
    layoutThemeColorType: LAYOUT_THEME_COLOR.DEFAULT,
    layoutModeType: LAYOUT_MODE_TYPES.LIGHTMODE,
    leftSidebarType: LAYOUT_SIDEBAR_TYPES.DARK,
    layoutWidthType: LAYOUT_WIDTH_TYPES.FLUID,
    layoutPositionType: LAYOUT_POSITION_TYPES.FIXED,
    topbarThemeType: LAYOUT_TOPBAR_THEME_TYPES.LIGHT,
    leftsidbarSizeType: LEFT_SIDEBAR_SIZE_TYPES.DEFAULT,
    leftSidebarViewType: LEFT_SIDEBAR_VIEW_TYPES.DEFAULT,
    leftSidebarImageType: LEFT_SIDEBAR_IMAGE_TYPES.NONE,
    preloader: PERLOADER_TYPES.DISABLE,
    sidebarVisibilitytype: SIDEBAR_VISIBILITY_TYPES.SHOW
};
image layoutThemeType.DEFAULT
image layoutThemeType.SAAS
image layoutThemeType.MATERIAL
image layoutThemeType.GALAXY
image layoutThemeType.CORPORATE
image layoutThemeType.MINIMAL
image layoutThemeType.CREATIVE
image layoutThemeType.MODERN
image layoutThemeType.INTERACTIVE
image layoutThemeType.CLASSIC
image layoutThemeType.VINTAGE