Theme Configuration

Theme configuration allows you to customize your project design. It includes Layout Modes, Types , Widths, Themes etc...

For configuration of your project, we are using the src/slices/layouts/reducer.ts file, which has all the layout configurations listed from where you can style your project according to your needs.

                                    
const initialState: LayoutState = {
    layoutType: LAYOUT_TYPES.VERTICAL,
    layoutModeType: LAYOUT_MODE_TYPES.LIGHTMODE,
    layoutTopModeType: LAYOUT_TOP_MODE_TYPES.WARNINGMODE,
    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.SMALLHOVER,
    leftSidebarViewType: LEFT_SIDEBAR_VIEW_TYPES.DEFAULT,
    leftSidebarImageType: LEFT_SIDEBAR_IMAGE_TYPES.NONE,
    preloader: PERLOADER_TYPES.DISABLE
  };

Theme Setup

You can set up and customize a theme in your Next.js application using a design system or UI library. This will help maintain consistency, improve productivity, and enhance the visual appeal of your project

Layouts	Types
LAYOUT_TYPES	Vertical , Horizontal , Two Column
LAYOUT_MODE_TYPES	Light , Dark
LAYOUT_TOP_MODE_TYPES	Warningmode , Successmode , Dangermode
LAYOUT_SIDEBAR_TYPES	Light , Dark , Gradient , Gradient_2 , Gradient-3 , Gradient-4
LAYOUT_WIDTH_TYPES	Fluid, Boxed
LAYOUT_POSITION_TYPES	Fixed , Scrollable
LAYOUT_TOPBAR_THEME_TYPES	Light , Dark , Brand
LEFT_SIDEBAR_SIZE_TYPES	Default , Compact , SmallIcon , SmallHover
LEFT_SIDEBAR_VIEW_TYPES	Dafault , Detached