Customization
Customizing Color Palette
You can change the color palette of any demo very easily by simply changing the few scss variables value.
In order to modify the light mode colors in existing themes, open the
_theme-mode.scss file from
resources/scss/config/_theme-mode.scss and change any variable in it.
Your changes would get reflected automatically in any bootstrap based
components or elements.
And for modify the dark mode colors in existing themes, open the
variable-dark.scss file from
resources/scss/config/_variable-dark.scss and change any variable in it.
Customizing Sidebar Color, Topbar Color and Layouts
Lahomes 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 size. You can customize it by specifying the layout class name on body element in your html. The config object properties accept the following values:
And for Customizing in existing themes, open the
config.js file from
resources/js/config.js and change in config js it.
| Title | Type | Options | Description |
|---|---|---|---|
data-theme |
String | "light" | "dark" | Changes overall color scheme to dark |
data-topbar-color
|
String | "light" | "dark" | Changes the color scheme of the topbar to a given value |
data-menu-color
|
String | "light" | "dark" | Changes the color scheme of the menu to a given value |
data-menu-size
|
String | "default" | "condensed" | "sm-hover" | "sm-hover-active" | "hidden" | The left sidebar size is reduced to a condensed (small) size |