To use ThemeSettings plugin, first of all, you need to:
layout-helpers.js
and theme-settings.js
scripts in the <head>
section.
<script>
block in the <head>
section. It's important to initialize the plugin
in the <head>
to prevent style blinking.
theme-settings-bootstrap-css
, theme-settings-appwork-css
,
theme-settings-theme-css
and theme-settings-colors-css
classes to bootstrap
, appwork
,
theme-*
and colors
stylesheets. Please
note that ThemeSettings plugin initialization code must be after
core stylesheets.
<!-- Core stylesheets -->
<link rel="stylesheet" href="path/to/css/bootstrap.css" class="theme-settings-bootstrap-css">
<link rel="stylesheet" href="assets/vendor/css/appwork.css" class="theme-settings-appwork-css">
<link rel="stylesheet" href="path/to/theme-css/theme-corporate.css" class="theme-settings-theme-css">
<link rel="stylesheet" href="path/to/css/colors.css" class="theme-settings-colors-css">
<link rel="stylesheet" href="path/to/css/uikit.css">
<!-- Layout helpers -->
<script src="path/to/layout-helpers.js"></script>
<!-- Theme settings -->
<script src="path/to/theme-settings.js"></script>
<script>
window.themeSettings = new ThemeSettings({
cssPath: 'path/to/css/',
themesPath: 'path/to/theme-css/'
});
</script>
// Get current settings. Do not change it directly, use methods instead.
console.log(window.themeSettings.settings);
/*
{
"cssPath": "path/to/css/",
"themesPath": "path/to/theme-css/",
"cssFilenamePattern": "%name%.css",
"navbarBgs": [ ... ],
"defaultNavbarBg": "navbar-theme",
"sidenavBgs": [ ... ],
"defaultSidenavBg": "sidenav-theme",
"footerBgs": [ ... ],
"defaultFooterBg": "footer-theme",
"availableThemes": [ ... ],
"defaultTheme": { ... },
"controls": [ ... ],
"rtl": false,
"material": false,
"layoutPosition": "static",
"layoutReversed": false,
"layoutNavbarFixed": false,
"layoutFooterFixed": false,
"navbarBg": "navbar-theme",
"sidenavBg": "sidenav-theme",
"footerBg": "footer-theme",
"theme": { ... }
}
*/
Option | Description |
---|---|
cssPath |
Core stylesheets path. Must ends with a slash. Required |
themesPath |
Theme stylesheets path. Must ends with a slash. Required |
cssFilenamePattern |
Filename pattern. Default:
For example, if you set this option to
|
controls |
Using this option you can disable ThemeSettings controls. Just pass an array of the required controls. Default: ['rtl', 'material'] ,
ThemeSettings panel will contain only RTL and material switchers.
|
sidenavBgs |
Available layout sidenav backgrounds. Default:['sidenav-theme', 'primary', 'primary-dark sidenav-dark', 'primary-darker sidenav-dark', 'secondary', 'secondary-dark sidenav-dark', 'secondary-darker sidenav-dark', 'success', 'success-dark sidenav-dark', 'success-darker sidenav-dark', 'info', 'info-dark sidenav-dark', 'info-darker sidenav-dark', 'warning', 'warning-dark sidenav-light', 'warning-darker sidenav-light', 'danger', 'danger-dark sidenav-dark', 'danger-darker sidenav-dark', 'dark', 'white', 'light', 'lighter']
|
defaultSidenavBg |
Default layout sidenav background. The plugin uses this value if no sidenav background value found in the localStorage or its value is incorrect. Default:sidenav-theme
|
navbarBgs |
Available layout navbar backgrounds. Default:['navbar-theme', 'primary', 'primary-dark navbar-dark', 'primary-darker navbar-dark', 'secondary', 'secondary-dark navbar-dark', 'secondary-darker navbar-dark', 'success', 'success-dark navbar-dark', 'success-darker navbar-dark', 'info', 'info-dark navbar-dark', 'info-darker navbar-dark', 'warning', 'warning-dark navbar-light', 'warning-darker navbar-light', 'danger', 'danger-dark navbar-dark', 'danger-darker navbar-dark', 'dark', 'white', 'light', 'lighter']
|
defaultNavbarBg |
Default layout navbar background. The plugin uses this value if no navbar background value found in the localStorage or its value is incorrect. Default:navbar-theme
|
footerBgs |
Available layout footer backgrounds. Default:['footer-theme', 'primary', 'primary-dark footer-dark', 'primary-darker footer-dark', 'secondary', 'secondary-dark footer-dark', 'secondary-darker footer-dark', 'success', 'success-dark footer-dark', 'success-darker footer-dark', 'info', 'info-dark footer-dark', 'info-darker footer-dark', 'warning', 'warning-dark footer-light', 'warning-darker footer-light', 'danger', 'danger-dark footer-dark', 'danger-darker footer-dark', 'dark', 'white', 'light', 'lighter']
|
defaultFooterBg |
Default layout footer background. The plugin uses this value if no footer background value found in the localStorage or its value is incorrect. Default:footer-theme
|
availableThemes |
Available themes. Theme item has the next structure:
Default:
|
defaultTheme |
Default theme index. The plugin uses this value if no theme value found in the localStorage or its value is incorrect. Default:1
|
pathResolver |
A callback function that lets you change the stylesheet url on the fly. Accepts stylesheet url. Must return stylesheet url. This function is useful when you're using hashes in filenames - just load the manifest and return the correct path. Example:
|
onSettingsChange |
A callback function which invoked after settings changed and stored in the localStorage.
Accepts Example:
|
Method | Description |
---|---|
setRtl(rtl) |
Set to true to enable RTL direction, false to disable. Will reload page.
|
setMaterial(material) |
Set to true to enable material styling, false to disable. Will reload page.
|
setTheme(themeName, updateStorage = true, cb = null) |
Set the current theme by name, must be in the settings.availableThemes
array. The cb function will be invoked after the theme is loaded.
Set updateStorage to false to not update localStorage.
|
setLayoutPosition(pos, updateStorage = true) |
Set layout position. Available values:
updateStorage to false
to not update localStorage.
|
setLayoutNavbarFixed(fixed, updateStorage = true) |
Set to true to make the layout navbar fixed, false to make it static.
Set updateStorage to false to not update localStorage.
|
setLayoutFooterFixed(fixed, updateStorage = true) |
Set to true to make the layout footer fixed, false to make it static.
Set updateStorage to false to not update localStorage.
|
setLayoutReversed(reversed, updateStorage = true) |
Set to true to make the layout reversed, false to reset.
Set updateStorage to false to not update localStorage.
|
setNavbarBg(bg, updateStorage = true) |
Set the layout navbar background. The value must be in the settings.navbarBgs
array. Set updateStorage to false to not update localStorage.
|
setSidenavBg(bg, updateStorage = true) |
Set the layout sidenav background. The value must be in the settings.sidenavBgs
array. Set updateStorage to false to not update localStorage.
|
setFooterBg(bg, updateStorage = true) |
Set the layout footer background. The value must be in the settings.footerBgs
array. Set updateStorage to false to not update localStorage.
|
update() |
Update settings panel. |
updateNavbarBg() |
Update the layout navbar background. |
updateSidenavBg() |
Update the layout sidenav background. |
updateFooterBg() |
Update the layout footer background. |
clearLocalStorage() |
Clear localStorage values. |
destroy() |
Destroy ThemeSettings instance. |
Use ThemeSettings configuration generator to simplify the initial setup.