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.
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, 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
- 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.VERTICALHorizontal Layout
layoutType: layoutTypes.HORIZONTALLayout 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.FLUIDBoxed Layout
layoutWidth: layoutWidthTypes.BOXEDTopbar 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.LIGHTDark Topbar
topbarTheme: topBarThemeTypes.DARKColored Topbar
(it's available for horizontal layout only)
topbarTheme: topBarThemeTypes.COLORED