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,
    layoutModeType: layoutModeTypes.LIGHT
    layoutWidth: layoutWidthTypes.FLUID,
    leftSideBarTheme: leftSideBarThemeTypes.DARK,
    leftSideBarThemeImage: leftBarThemeImageTypes.NONE,
    leftSideBarType: leftSidebarTypes.DEFAULT,
    topbarTheme: topBarThemeTypes.LIGHT,
    isPreloader: false,
    showRightSidebar: false,
    isMobile: false,
    showSidebar: true,
    leftMenu: false,
  };

layoutType : it indicates layout types
layoutModeType : it indicates layout mode
layoutWidth : it indicates layout widths
leftSideBarTheme : it indicates sidebar theme types in vertical layout
leftSideBarThemeImage : it indicates sidebar background image types in vertical layout
topbarTheme : it indicates topbar theme in layout
isPreloader : it indicates that you want to add preloader or not in template

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 width.

Vertical Layout

layoutType: layoutTypes.VERTICAL

Horizontal Layout

layoutType: layoutTypes.HORIZONTAL

Layout Mode Types

There are 2 types of Layout Mode : 1. Light Layout 2. Dark Layout. you would change the layoutModeType variable's value if you want to change layout Mode.

Light Layout

layoutModeType: layoutModeTypes.LIGHT

Dark Layout

layoutModeType: layoutModeTypes.DARK

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

Colored Topbar

(it's available for horizontal layout only)

topbarTheme: topBarThemeTypes.COLORED

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.