> For the complete documentation index, see [llms.txt](https://phoenixcoded.gitbook.io/able-pro/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://phoenixcoded.gitbook.io/able-pro/angular/theme-configuration.md).

# Theme Configuration

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

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

```typescript
export class AbleProConfig {
  static layout = 'vertical'; // vertical, horizontal, compact
  static isDarkMode = 'light'; // light, dark, auto-mode
  static theme_color = 'blue-theme'; // blue-theme, indigo-theme, purple-theme, pink-theme, red-theme, orange-theme, yellow-theme, green-theme, teal-theme, cyan-theme
  static isRtlLayout = false; // false true
  static isBox_container = false; // false true
  static theme_contrast = false; //true false
  static menu_caption = false; // true false
  static isLanding = true;
  static i18n = 'en'; // en, fr, ro, cn
}

export const DASHBOARD_PATH = '/dashboard/default';
```

{% endcode %}

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

<table><thead><tr><th width="179">Option</th><th width="133">Default</th><th width="113">Data Type</th><th>Description</th></tr></thead><tbody><tr><td><strong>layout</strong></td><td>vertical</td><td>String</td><td><code>vertical</code>, <code>horizontal</code>, <code>compact</code></td></tr><tr><td><strong>isDarkMode</strong></td><td>light</td><td>String</td><td><code>light</code>, <code>dark</code>, <code>auto</code></td></tr><tr><td><strong>theme_color</strong></td><td>blue-theme</td><td>String</td><td><p><code>blue-theme, indigo-theme, purple-theme,</code></p><p><code>pink-theme,red-theme,orange-theme, yellow-theme, green-theme, teal-theme,cyan-theme</code></p></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>isBox_container</strong></td><td>false</td><td>Boolean</td><td><code>true</code>, <code>false</code></td></tr><tr><td><strong>theme_contrast</strong></td><td>false</td><td>Boolean</td><td><code>true</code>, <code>false</code></td></tr><tr><td><strong>menu_caption</strong></td><td>false</td><td>Boolean</td><td><code>true</code>, <code>false</code></td></tr><tr><td><strong>isLanding</strong></td><td>true</td><td>Boolean</td><td><code>true</code>, <code>false</code></td></tr><tr><td><strong>i18n</strong></td><td>en</td><td>String</td><td><code>en</code>, <code>fr</code>, <code>ro</code>, <code>cn</code></td></tr></tbody></table>