# Theme Configuration

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

{% code title="app-config.ts" %}

```javascript
export class ThemeConfig {
  static layout = 'vertical'; // vertical, Horizontal
  static pre_layout: string = null; // null, layout-2, layout-2-2, layout-3, layout-4, layout-4-2, layout-6, layout-8
  static isCollapseMenu = false; // true, false
  static layout_type = 'menu-dark'; // menu-dark, menu-light, dark,
  static isNavIconColor = false; // true, false
  static headerBackColor = 'header-default'; // header-default, header-blue, header-red, header-purple, header-lightblue, header-dark
  static navBackColor = 'navbar-default'; // navbar-default, navbar-blue, navbar-red, navbar-purple, navbar-lightblue, navbar-dark
  static navBrandColor = 'brand-default'; // brand-default, brand-blue, brand-red, brand-purple, brand-lightblue, brand-dark
  static navBackImage = false; // false, navbar-image-1, navbar-image-2, navbar-image-3, navbar-image-4, navbar-image-5
  static isRtlLayout = false; // false, true
  static isNavFixedLayout = true; // false, true
  static isHeaderFixedLayout = false; // false, true
  static isBoxLayout = false; // false, true
  static navDropdownIcon = 'style1'; // style1, style2, style3
  static navListIcon = 'style1'; // style1, style2, style3, style4, style5, style6
  static navActiveListColor = 'active-default'; // active-default, active-blue, active-red, active-purple, active-lightblue, active-dark
  static navListTitleColor = 'title-default'; // title-default, title-blue, title-red, title-purple, title-lightblue, title-dark
  static isNavListTitleHide = false; // false, true
  static layout_6_Background = '#23b7e5'; // used only for pre-layout = layout-6
}
```

{% endcode %}

{% hint style="info" %}
You can edit this file at **`[ ../src/app/app-config.ts ]`**
{% endhint %}

<table data-header-hidden><thead><tr><th width="218">Option</th><th>Default</th><th width="138">Data Type</th><th>Description</th></tr></thead><tbody><tr><td><strong>Option</strong></td><td><strong>Default</strong></td><td><strong>Data Type</strong></td><td><strong>Description</strong></td></tr><tr><td><strong>layout</strong></td><td>vertical</td><td>String</td><td><code>vertical</code>,  <code>horizontal,</code></td></tr><tr><td><strong>isCollapseMenu</strong></td><td>false</td><td>Boolean</td><td><code>true</code>, <code>false</code></td></tr><tr><td><strong>layout_type</strong></td><td>menu-dark</td><td>String</td><td><code>menu-dark</code>, <code>menu-light</code>, <code>dark</code></td></tr><tr><td><strong>isNavIconColor</strong></td><td>false</td><td>Boolean</td><td><code>true</code>, <code>false</code></td></tr><tr><td><strong>headerBackColor</strong></td><td>header-default</td><td>String</td><td><code>header-default, header-blue, header-red, header-purple, header-lightblue, header-dark</code></td></tr><tr><td><strong>navBackColor</strong></td><td>navbar-default</td><td>String</td><td><code>navbar-default, navbar-blue, navbar-red, navbar-purple, navbar-lightblue, navbar-dark</code></td></tr><tr><td><strong>navBrandColor</strong></td><td>brand-default</td><td>String</td><td><code>brand-default, brand-blue, brand-red, brand-purple, brand-lightblue, brand-dark</code></td></tr><tr><td><strong>navDropdownIcon</strong></td><td>style1</td><td>String</td><td><code>style1, style2, style3</code></td></tr><tr><td><strong>navBackImage</strong></td><td>false</td><td>String</td><td><code>false, navbar-image-1, navbar-image-2, navbar-image-3, navbar-image-4, navbar-image-5</code></td></tr><tr><td><strong>navListIcon</strong></td><td>style1</td><td>String</td><td><code>style1, style2, style3, style4, style5, style6</code></td></tr><tr><td><strong>isRtlLayout</strong></td><td>false</td><td>Boolean</td><td><code>true</code>, <code>false</code></td></tr><tr><td><strong>isnavFixedLayout</strong></td><td>true</td><td>Boolean</td><td><code>true, false</code></td></tr><tr><td><strong>isHeaderFixedLayout</strong></td><td>false</td><td>Boolean</td><td><code>true, false</code></td></tr><tr><td><strong>isBoxLayout</strong></td><td>false</td><td>Boolean</td><td><code>true</code>, <code>false</code></td></tr><tr><td><strong>isNavListTitleHide</strong></td><td>false</td><td>Boolean</td><td><code>true, false</code></td></tr><tr><td><strong>navActiveListColor</strong></td><td>active-defaul</td><td>String</td><td><code>active-default, active-blue, active-red, active-purple, active-lightblue, active-dark</code></td></tr><tr><td><strong>navListTitleColor</strong></td><td>title-default</td><td>String</td><td><code>title-default, title-blue, title-red, title-purple, title-lightblue, title-dark</code></td></tr></tbody></table>