Setup | Invoika - Angular 21 Admin & Dashboard Template

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/app/store/layouts/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 = {
    LAYOUT: LAYOUT_TYPES.VERTICAL,
    LAYOUT_MODE: LAYOUT_MODE.LIGHTMODE,
    LAYOUT_WIDTH: LAYOUT_WIDTH_TYPES.FLUID,
    LAYOUT_POSITION: LAYOUT_POSITION_TYPES.FIXED,
    TOPBAR: LAYOUT_TOPBAR_COLOR_TYPES.LIGHT,
    SIDEBAR_COLOR: SIDEBAR_COLOR.LIGHT
    SIDEBAR_SIZE: SIDEBAR_SIZE.LARGE
    SIDEBAR_VIEW: SIDEBAR_VIEW.DEFAULT
    SIDEBAR_VISIBILITY: SIDEBAR_VISIBILITY.SHOW
};

Theme Setup

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

Layouts
LAYOUT_MODE	Light , Dark
LAYOUT_WIDTH	Fluid , Boxed
LAYOUT_POSITION	Fixed , Scrollable
TOPBAR	Light , Dark
SIDEBAR_COLOR	Light.Dark,Gradiant
SIDEBAR_SIZE	Lg,Md,Sm,Sm-hover
SIDEBAR_VIEW	Default,Detached
SIDEBAR_VISIBILITY	Show

Properties
Theme Setup