Theme Configuration

Theme Customization options

../src/app/app-config.ts

app-config.ts
export class ThemeConfig {
  public static config = {
    layout: 'vertical', // vertical, horizontal
    'pre-layout': null, // null, layout-2, layout-2-2, layout-3, layout-4, layout-4-2, layout-6, layout-8
    'collapse-menu': false,
    'layout-type': 'menu-dark', // menu-dark, menu-light, dark
    'nav-icon-color': false,
    'header-back-color': 'header-default', // header-default, header-blue, header-red, header-purple, header-lightblue, header-dark
    'nav-back-color': 'navbar-default', // navbar-default, navbar-blue, navbar-red, navbar-purple, navbar-lightblue, navbar-dark
    'nav-brand-color': 'brand-default', // brand-default, brand-blue, brand-red, brand-purple, brand-lightblue, brand-dark
    'nav-back-image': false, // false, navbar-image-1, navbar-image-2, navbar-image-3, navbar-image-4, navbar-image-5
    'rtl-layout': false,
    'nav-fixed-layout': true,
    'header-fixed-layout': false,
    'box-layout': false,
    'nav-dropdown-icon': 'style1', // style1, style2, style3
    'nav-list-icon': 'style1', // style1, style2, style3, style4, style5, style6
    'nav-active-list-color': 'active-default', // active-default, active-blue, active-red, active-purple, active-lightblue, active-dark
    'nav-list-title-color': 'title-default', // title-default, title-blue, title-red, title-purple, title-lightblue, title-dark
    'nav-list-title-hide': false,
    'layout-6-background': '#23b7e5' // used only for pre-layout = layout-6
  };
}

You can edit this file at [ ../src/app/app-config.ts ]

Option

Default

Data Type

Description

layout

vertical

String

vertical, horizontal,

collapse-menu

false

Boolean

true, false

layout-type

menu-dark

String

menu-dark, menu-light, dark

nav-icon-color

false

Boolean

true, false

header-back-color

header-default

String

header-default, header-blue, header-red, header-purple, header-lightblue, header-dark

nav-back-color

navbar-default

String

navbar-default, navbar-blue, navbar-red, navbar-purple, navbar-lightblue, navbar-dark

nav-brand-color

brand-default

String

brand-default, brand-blue, brand-red, brand-purple, brand-lightblue, brand-dark

nav-dropdown-icon

style1

String

style1, style2, style3

nav-back-image

false

String

false, navbar-image-1, navbar-image-2, navbar-image-3, navbar-image-4, navbar-image-5

'nav-list-icon

style1

String

style1, style2, style3, style4, style5, style6

rtl-layout

false

Boolean

true, false

nav-fixed-layout

true

Boolean

true, false

header-fixed-layout

false

Boolean

true, false

box-layout

false

Boolean

true, false

nav-list-title-hide

false

Boolean

true, false

nav-active-list-color

active-defaul

String

active-default, active-blue, active-red, active-purple, active-lightblue, active-dark

nav-list-title-color

title-default

String

title-default, title-blue, title-red, title-purple, title-lightblue, title-dark

Last updated