Theme Configuration

Properties

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.

export const initialState: LayoutState = {
    layoutType: LAYOUT_TYPES.VERTICAL,
    layoutModeType: LAYOUT_MODE_TYPES.LIGHTMODE,
    leftSidebarType: LAYOUT_SIDEBAR_TYPES.LIGHT,
    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
};

Theme Setup

You can set the theme according to your needs , the below types of layouts we have used in Steex.

Layouts	Types
LAYOUT_TYPES	Vertical & Horizontal
LAYOUT_MODE_TYPES	Light , Dark
LAYOUT_SIDEBAR_TYPES	Light , Dark
LAYOUT_WIDTH_TYPES	Fluid, Boxed
LAYOUT_POSITION_TYPES	Fixed , Scrollable
LAYOUT_TOPBAR_THEME_TYPES	Light , Dark
LEFT_SIDEBAR_SIZE_TYPES	Default , Compact ,Small(Icon View) & Small Hover View
LEFT_SIDEBAR_VIEW_TYPES	Default , Detached

Properties
Theme Setup