# 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: 'Preset 1'
}
```

### 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, // Set Dark for Dark theme
</strong>  fontTheme: 'Inter-var',
  inputBg: false,
  themeContrast: false,
  boxed: false,
  isRtl: false,
  presetColor: 'Preset 1'
}
</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: false,
  isRtl: false,
  presetColor: 'Preset 1'
}
</code></pre>

## How to Change 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, // Horizontal layout
  actTheme: ThemeMode.Light,
  fontTheme: 'Inter-var',
  inputBg: false,
<strong>  themeContrast: true, // Set to true value
</strong>  boxed: false,
  isRtl: false,
  presetColor: 'Preset 1'
}
</code></pre>

## How to Set 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, // Horizontal layout
  actTheme: ThemeMode.Light,
  fontTheme: 'Inter-var',
  inputBg: false,
  themeContrast: false,
<strong>  boxed: true, // Set True here
</strong>  isRtl: false,
  presetColor: 'Preset 1'
}
</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, // Horizontal layout
  actTheme: ThemeMode.Light,
  fontTheme: 'Inter-var',
<strong>  inputBg: true, // Set True here
</strong>  themeContrast: false,
  boxed: false,
  isRtl: false,
  presetColor: 'Preset 1'
}
</code></pre>

## How to Change Color Scheme?

```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: 'Preset 1' // Change to Preset {1,2,3,4,5,6,7,8,9}
}
```