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": { ... },
"styles": [ ... ],
"lang": "en",
"controls": [ ... ],
"rtl": false,
"material": false,
"layoutPosition": "static",
"layoutReversed": false,
"layoutNavbarFixed": false,
"layoutFooterFixed": false,
"navbarBg": "navbar-theme",
"sidenavBg": "sidenav-theme",
"footerBg": "footer-theme",
"theme": { ... }
}
*/You can configure ThemeSettings application-wide by modifying global variables.
ThemeSettings.AVAILABLE_THEMES.push({
name: 'theme-name',
title: 'Theme title',
colors: {
primary: '#333',
navbar: '#666',
sidenav: '#999'
},
// Colors for dark style
colorsDark: {
primary: '#eee',
navbar: '#ccc',
sidenav: '#aaa'
}
});
window.themeSettings = new ThemeSettings({
defaultTheme: 'theme-name',
...
});| Variable | Value |
|---|---|
ThemeSettings.AVAILABLE_THEMES |
|
ThemeSettings.NAVBAR_BGS |
|
ThemeSettings.SIDENAV_BGS |
|
ThemeSettings.FOOTER_BGS |
|
ThemeSettings.LANGUAGES |
|
You can add translations by inserting a translation object into the ThemeSettings.LANGUAGES. Optionally, you
can translate theme titles. Full example:
ThemeSettings.LANGUAGES.en = {
panel_header: 'SETTINGS',
rtl_switcher: 'RTL direction',
style_switcher_default: 'Light style',
style_switcher_material: 'Material style',
style_switcher_dark: 'Dark style',
layout_header: 'LAYOUT',
layout_static: 'Static',
layout_offcanvas: 'Offcanvas',
layout_fixed: 'Fixed',
layout_fixed_offcanvas: 'Fixed offcanvas',
layout_navbar_swicher: 'Fixed navbar',
layout_footer_swicher: 'Fixed footer',
layout_reversed_swicher: 'Reversed',
navbar_bg_header: 'NAVBAR BACKGROUND',
sidenav_bg_header: 'SIDENAV BACKGROUND',
footer_bg_header: 'FOOTER BACKGROUND',
theme_header: 'THEME',
themes: { // "themes" key is optional. You can translate theme titles partially
'theme-air': 'Air',
'theme-corporate': 'Corporate',
'theme-cotton': 'Сotton',
'theme-gradient': 'Gradient',
'theme-paper': 'Paper',
'theme-shadow': 'Shadow',
'theme-soft': 'Soft',
'theme-sunrise': 'Sunrise',
'theme-twitlight': 'Twitlight',
'theme-vibrant': 'Vibrant'
}
};
ThemeSettings.LANGUAGES.fr = { ... };
ThemeSettings.LANGUAGES.de = { ... };
// Then initialize the plugin with the required language:
window.themeSettings = new ThemeSettings({
lang: 'fr',
...
});
// Or change the language at runtime:
window.themeSettings.setLang('de');
| 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', 'style'],
ThemeSettings panel will contain only RTL and style switchers.
|
styles |
This option allows to set styles that will be available for choosing. Pass an array of the required styles. Default: |
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 or name. Accepts 1
|
lang |
Current language. The value must be in the en
|
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.
|
setStyle(style) |
Set the current style. Accepts the next values:
|
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.
|
isLightStyle() |
Returns true if the current style is light, otherwise returns false.
|
isMaterialStyle() |
Returns true if the current style is material, otherwise returns false.
|
isDarkStyle() |
Returns true if the current style is dark, otherwise returns false.
|
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.
|
setLang(language) |
Set language. The value must be in the ThemeSettings.LANGUAGES, otherwise an error will be thrown.
|
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.