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,
    layoutThemeType : LAYOUT_THEME_TYPES.DEFAULT,
    layoutModeType: LAYOUT_MODE_TYPES.LIGHTMODE,
    leftSidebarType: LAYOUT_SIDEBAR_TYPES.DARK,
    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,
    leftSidebarImageType: LEFT_SIDEBAR_IMAGE_TYPES.NONE,
    preloader: PERLOADER_TYPES.DISABLE,
    bodyImageType: BODY_IMAGE_TYPES.NONE
  };

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 , Two Column
LAYOUT_MODE_TYPES	Light , Dark
LAYOUT_THEME_TYPES	Default , Creative , Interaction , Material , Minimal , Modern
LAYOUT_SIDEBAR_TYPES	Light , Dark , Gradient , Gradient_2 , Gradient-3 , Gradient-4
LAYOUT_WIDTH_TYPES	Fluid, Boxed
LAYOUT_POSITION_TYPES	Fixed , Scrollable
LAYOUT_TOPBAR_THEME_TYPES	Light , Dark , Brand
LEFT_SIDEBAR_SIZE_TYPES	Default , Compact , SmallIcon , SmallHover
LEFT_SIDEBAR_VIEW_TYPES	Dafault , Detached