#### Customization

Konrix
Documentation
Customization

#### In-built Demos

You can change the colour palatte of any demo very easily by simply changing the few CSS variables' value.

In order to modify the colors in existing themes, open the `app.css` and change any variable in it. Your changes would get reflected automatically in any Tailwind based components or elements. Note that, this requires you to setup and run gulp flow provided in installation steps earlier.

#### RTL Support

Konrix provides the RTL support as well. You will simply add attribute in html tage.

simply change the reference of update the html tag with attribute `dir="rtl"`. E.g. `<html lang="en" dir="rtl">`

#### Customizing Left Sidebar, Layout Width and Right Sidebar

Konrix allows you to have customized left sidebar, overall layout width or right sidebar. You could turn the left sidebar to different size, theme (look) and type. You can customize it by specifying the layout config data attribute on `html` element in your html

Title | Type | Options | Description
--- | --- | --- | ---
`data-mode` | String | "light" | "dark" | Changes overall color scheme to dark
`dir` | String | "ltr" | "rtl" | Changes Layout direction
`data-layout-width` | String | "fluid" | "boxed" | Changes the width of overall layout
`data-topbar-color` | String | "light" | "dark" | "brand" | "Gradient" | the Topbar color scheme.
`data-menu-color` | String | "light" | "dark" | "brand" | "Gradient" | the left sidebar color scheme.
`data-sidenav-view` | String | "default" | "md" | "sm" | "hover" | "hover-active" | "mobile" | "hidden" | the left sidebar size changes to small (condensed)
`data-layout-position` | String | "fixed" | "scrollable" | Layout Position

Following are few examples:

- ##### Changes the left sidebar theme to "dark"

  `<html data-menu-color="dark"></html>`

- ##### Changes the left sidebar theme to "light"

  `<html data-menu-color="light"></html>`

- ##### Changes the left sidebar to scrollable

  `<html data-layout-position="scrollable"></html>`

- ##### Changes the left sidebar size to small

  `<html data-sidenav-view="sm"></html>`

#### Adding new page

We have provided a starter page (check `views/pages-starter.ejs`). It allows you to get started easily and helps you to add new page. Please note following important points:

- Most of default/basic form elements along with few advanced elements are separately add css and js.
- Few elements e.g. charts, data tables, calendar, maps etc requires you to include corresponding css and js files in your html. Please check corresponding documentation page for the same.