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 = {
    layoutModeType: LAYOUT_MODE_TYPES.LIGHTMODE,
    layoutWidthType: LAYOUT_WIDTH_TYPES.BOXED,
    layoutPositionType: LAYOUT_POSITION_TYPES.FIXED,
    topbarThemeType: LAYOUT_TOPBAR_THEME_TYPES.DARK,
    preloader: PERLOADER_TYPES.DISABLE,
    topbarImage: LAYOUT_TOPBAR_IMAGE.PATTERN1,
    cardlayout: LAYOUT_CARD.BORDERLESS
};

Theme Setup

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

Layouts	Types
LAYOUT_TOPBAR_IMAGE	Pattern 1,Pattern 2 & Pattern 3
LAYOUT_MODE_TYPES	Light , Dark , Brand
LAYOUT_CARD	Borderless , Border
LAYOUT_WIDTH_TYPES	Fluid, Boxed
LAYOUT_POSITION_TYPES	Fixed , Scrollable
LAYOUT_TOPBAR_THEME_TYPES	Light , Dark , Brand
PERLOADER_TYPES	Enable , Disable