> 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/vue/theme-ui/theme-settings.md).

# Theme Settings

Theme settings lie under `config.ts` file.

## How to Set Default Settings?

```typescript
// Config.ts
const config: ConfigProps = {
  Sidebar_drawer: true,
  Customizer_drawer: false,
  mini_sidebar: false,
  setHorizontalLayout: false, // Horizontal layout
  actTheme: ThemeMode.Light,
  fontTheme: 'Inter-var',
  inputBg: false,
  themeContrast: false,
  boxed: false,
  isRtl: false,
  presetColor: 'default'
}; 
```

## How to Set Dark Theme?

<pre class="language-typescript"><code class="lang-typescript">// Config.ts
const config: ConfigProps = {
    Sidebar_drawer: true,
    Customizer_drawer: false,
    mini_sidebar: false,
    setHorizontalLayout: false, 
<strong>    actTheme: ThemeMode.Dark, // Change Dark theme
</strong>    fontTheme: 'Inter-var',
    inputBg: false,
    themeContrast: false,
    boxed: true,
    isRtl: false,
    presetColor: 'default'
}; 
</code></pre>

## How to Set Horizontal  Layout?

<pre class="language-typescript"><code class="lang-typescript">// Config.ts
const config: ConfigProps = {
    Sidebar_drawer: true,
    Customizer_drawer: false,
    mini_sidebar: false,
<strong>    setHorizontalLayout: true, // Change horizontal layout
</strong>    actTheme: ThemeMode.Light,
    fontTheme: 'Inter-var',
    inputBg: false,
    themeContrast: false,
    boxed: true,
    isRtl: false,
    presetColor: 'default'
};
</code></pre>

## How to unset Boxed Layout?

<pre class="language-typescript"><code class="lang-typescript">// Config.ts
const config: ConfigProps = {
    Sidebar_drawer: true,
    Customizer_drawer: false,
    mini_sidebar: false, 
    setHorizontalLayout: false, 
    actTheme: ThemeMode.Light,
    fontTheme: 'Inter-var',
    inputBg: false,
    themeContrast: false,
<strong>    boxed: false, // Set False here
</strong>    isRtl: false,
    presetColor: 'default'
};
</code></pre>

## How to Change Input Text Background?

<pre class="language-typescript"><code class="lang-typescript">// Config.ts
const config: ConfigProps = {
    Sidebar_drawer: true,
    Customizer_drawer: false,
    mini_sidebar: false, 
    setHorizontalLayout: false, 
    actTheme: ThemeMode.Light,
    fontTheme: 'Inter-var',
<strong>    inputBg: true, // Set True here
</strong>    themeContrast: false,
    boxed: true,
    isRtl: false,
    presetColor: 'default'
}; 
</code></pre>

## How to Set RTL theme?

<pre class="language-typescript"><code class="lang-typescript">// Config.ts
const config: ConfigProps = {
  Sidebar_drawer: true,
  Customizer_drawer: false,
  mini_sidebar: false,
  setHorizontalLayout: false,
  actTheme: ThemeMode.Light,
  fontTheme: 'Inter-var',
  inputBg: false,
  themeContrast: false,
  boxed: false,
<strong>  isRtl: true, // Set True here
</strong>  presetColor: 'default'
}; 
</code></pre>

## How to Change Theme contrast?

<pre class="language-typescript"><code class="lang-typescript">// Config.ts
const config: ConfigProps = {
  Sidebar_drawer: true,
  Customizer_drawer: false,
  mini_sidebar: false,
  setHorizontalLayout: false,
  actTheme: ThemeMode.Light,
  fontTheme: 'Inter-var',
  inputBg: false,
<strong>  themeContrast: true, // Set True here
</strong>  boxed: false,
  isRtl: false,
  presetColor: 'default'
}; 
</code></pre>

## How to Change Color Scheme?

```typescript
// Config.ts
const config: ConfigProps = {
  Sidebar_drawer: true,
  Customizer_drawer: false,
  mini_sidebar: false,
  setHorizontalLayout: false,
  actTheme: ThemeMode.Light,
  fontTheme: 'Inter-var',
  inputBg: false,
  themeContrast: false,
  boxed: false,
  isRtl: false,
  presetColor: 'default' // change to theme1, theme2, theme3, theme4, theme5, theme6, theme7, theme8
}; 
```