theme Configuration

You can change the template as per your needs. To configure it, we will use reducer.js. you can find the file in src/store/layout folder.

Theme Options

Each of the theme configuration options is provided Below, you can change their values as per you need in INIT_STATE variable located in src/store/layout/reducer.js file.

Note : if you are going to update any object property of INIT_STATE, make sure you use option's corresponding constant given in src/constants/layout.js file. (Please do not change the constant's value in src/constants/layout.js file)

const INIT_STATE = {
  layoutType: layoutTypes.VERTICAL,
  layoutModeTypes: layoutModeTypes.LIGHTMODE,
  layoutWidth: layoutWidthTypes.FLUID,
  leftSideBarTheme: leftSideBarThemeTypes.DARK,
  leftSideBarType: leftSidebarTypes.DEFAULT,
  topbarTheme: topBarThemeTypes.LIGHT,
  showRightSidebar: false,
  isMobile: false,
  showSidebar: true,
  leftMenu: false,
};

layoutType : it indicates layout types
layoutModeTypes : it indicates layout dark or light mode types
layoutWidth : it indicates layout widths
leftSideBarTheme : it indicates sidebar theme types in vertical layout
leftSideBarType : it indicates left sidebar type in layout
topbarTheme : it indicates topbar theme in layout
showRightSidebar : it handles rightbar open/close state.

Layout Types

There are 2 types of Layout : 1. Horizontal Layout 2. Vertical Layout. please visit Layouts for more details. you would change the layoutType variable's value if you want to change layout.

Vertical Layout

layoutType: layoutTypes.VERTICAL

Horizontal Layout

layoutType: layoutTypes.HORIZONTAL

Layout Mode Types

There are 2 types of Layout Modes : 1. Light 2. Dark. please visit Layouts for more details. you would change the layoutModeTypes variable's value if you want to change layout mode.

Light Mode

layoutModeTypes: layoutModeTypes.LIGHTMODE

Dark Mode

layoutModeTypes: layoutModeTypes.DARKMODE

Layout Width

There are 2 types of Layout Width : 1. Fluid Layout Width 2. Boxed Width. you would change the layoutWidth variable's value if you want to change layout width.

Fluid Layout

layoutWidth: layoutWidthTypes.FLUID

Boxed Layout

layoutWidth: layoutWidthTypes.BOXED

Topbar Theme

There are 2 types of Topbar Theme : 1. Light Topbar 2. Dark Topbar 3. Colored Topbar. you would change the topbarTheme variable's value if you want to change layout width.

Light Topbar

topbarTheme: topBarThemeTypes.LIGHT

Dark Topbar

topbarTheme: topBarThemeTypes.DARK

Sidebar Type (Available for Vertical Layout Only)

There are 3 types of Sidebar Types : 1. Default 2. Compact 3. Icon . you would change the leftSideBarType variable's value if you want to change layout width.

Default Sidebar

leftSideBarType: leftSidebarTypes.DEFAULT

Compact Sidebar

leftSideBarType: leftSidebarTypes.COMPACT

Icon Sidebar

leftSideBarType: leftSidebarTypes.ICON

Sidebar Color (Available for Vertical Layout Only)

There are total 2 colors available for sidebar. you would change the leftSideBarTheme variable's value if you want to change layout width.

Light Color Sidebar

leftSideBarTheme: leftSideBarThemeTypes.LIGHT

DARK Color Sidebar

leftSideBarTheme: leftSideBarThemeTypes.DARK