> For the complete documentation index, see [llms.txt](https://codedthemes.gitbook.io/datta/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://codedthemes.gitbook.io/datta/color-presets.md).

# Theme Layouts

Datta Able comes up with 3+ theme layout presets. You can now change the available theme layout presets by doing the following steps:

Open the file  **`src\config`**.

<table><thead><tr><th width="241">Layout</th><th>Description</th></tr></thead><tbody><tr><td><strong>Vertical</strong></td><td><p></p><ul><li>fontFamily: <code>'Public Sans', sans-serif</code></li><li>i18n: <code>'en'</code></li><li>menuOrientation: <code>MenuOrientation.VERTICAL</code> </li><li>container: <code>false</code> </li><li>mode: <code>ThemeMode.LIGHT</code> </li><li>presetColor:  <code>'default'</code></li><li>caption: <code>true</code> </li><li>sidebarTheme: <code>false</code> </li><li>themeDirection: <code>ThemeDirection.LTR</code> </li><li>customColor: <code>'preset-1'</code> </li><li>headerColor: <code>' '</code> </li><li>navbarColor: <code>' '</code> </li><li>logoColor: <code>' '</code> </li><li>navbarCaptionColor: <code>' '</code> </li><li>navbarImg: <code>' '</code> </li><li>menuIcon: <code>'preset-1'</code> </li><li>menuLinkIcon: <code>'preset-1'</code></li></ul></td></tr><tr><td>HORIZONTAL</td><td><p></p><ul><li>menuOrientation: <code>MenuOrientation.HORIZONTAL</code></li></ul></td></tr><tr><td>Tab</td><td><ul><li>menuOrientation: <code>MenuOrientation.TAB</code></li></ul></td></tr><tr><td><strong>Layout 2</strong></td><td><ul><li>menuOrientation: <code>MenuOrientation.LAYOUT2</code></li></ul></td></tr><tr><td><strong>Layout 3</strong></td><td><ul><li>menuOrientation: <code>MenuOrientation.LAYOUT3</code></li></ul></td></tr><tr><td><strong>mode</strong></td><td><ul><li>mode: <code>ThemeMode.DARK</code></li></ul></td></tr><tr><td>themeDirection</td><td><ul><li>themeDirection: <code>ThemeDirection.RTL</code></li></ul></td></tr><tr><td>container</td><td><ul><li>container: <code>true</code></li></ul></td></tr><tr><td>caption</td><td><p></p><ul><li>caption: <code>false</code></li></ul></td></tr><tr><td>Sidebar Theme</td><td><p></p><ul><li>sidebarTheme: <code>true</code></li></ul></td></tr></tbody></table>