# Switcher Styles

##### Theme Styles :

You can change the Theme Styles by adding the attribute to the html tag in mainheader.html `(Root:html/partials/mainheader.html)`
`
`

Attribute | Description
--- | ---
`class="light"` | To set the light theme
`class="dark"` | To set the Dark theme
`dir="ltr"` | To set LTR version default
`dir="rtl"` | To set LTR version to RTL version
`data-nav-layout="vertical"` | To set menu layout to vertical
`data-nav-layout="horizontal"` `data-nav-style="menu-click"` | To set menu layout to horizontal
`data-nav-style="menu-click"` `data-toggled="menu-click-closed"` | To set navigation style to menu click - *Works same for both vertical and horizontal
`data-nav-style="menu-hover"` `data-toggled="menu-hover-closed"` | To set navigation style to menu hover - *Works same for both vertical and horizontal
`data-nav-style="icon-click"` `data-toggled="icon-click-closed"` | To set navigation style to icon click - *Works same for both vertical and horizontal
`data-nav-style="icon-hover"` `data-toggled="icon-hover-closed"` | To set navigation style to icon hover - *Works same for both vertical and horizontal
`data-page-style="regular"` | To set page style to Default
`data-page-style="classic"` | To set page style to Classic
`data-width="fullwidth"` | To set page width to Full Width
`data-width="boxed"` | To set page width to Boxed
`data-menu-position="fixed"` | To set menu position Fixed
`data-menu-position="scrollable"` | To set menu position Scrollable
`data-header-position="fixed"` | To set header position Fixed
`data-header-position="scrollable"` | To set header position Scrollable
`data-vertical-style="closed"` `data-toggled="closed-menu-close"` | To set sidemenu layout style Closed - *Does not work for horizontal
`data-vertical-style="icontext"` `data-toggled="icon-text-close"` | To set sidemenu layout style Icon Text - *Does not work for horizontal
`data-vertical-style="overlay"` `data-toggled="icon-overlay-close"` | To set sidemenu layout style Icon Overlay - *Does not work for horizontal
`data-vertical-style="detached"` `data-toggled="detached-close"` | To set sidemenu layout style Detached - *Does not work for horizontal
`data-vertical-style="doublemenu"` `data-toggled="double-menu-open"` | To set sidemenu layout style Double Menu - *Does not work for horizontal
`loader="enable"` | To enable loader by default

##### Theme Colors :

You can change the Theme Colors by adding the attribute to the html tag in mainhead.html `(Root:html/partials/mainhead.html)`
`
`

Attribute | Description
--- | ---
`data-menu-styles="light"` | To set the menu style to light
`data-menu-styles="dark"` | To set the menu style to dark
`data-menu-styles="color"` | To set the menu style to color
`data-menu-styles="gradient"` | To set the menu style to gradient
`data-menu-styles="transparent"` | To set the menu style to transparent
`data-header-styles="light"` | To set the header style to light
`data-header-styles="dark"` | To set the header style to dark
`data-header-styles="color"` | To set the header style to color
`data-header-styles="gradient"` | To set the header style to gradient
`data-header-styles="transparent"` | To set the header style to transparent
`bg-img="bgimg1"` | To set menu background image1
`bg-img="bgimg2"` | To set menu background image2
`bg-img="bgimg3"` | To set menu background image3
`bg-img="bgimg4"` | To set menu background image4
`bg-img="bgimg5"` | To set menu background image5