Theme Configuration

The theme values are of string type and can be configured as follows:

Theme Direction
  • Property: "theme_scheme_direction"
  • Choices: 'ltr' (left-to-right), 'rtl' (right-to-left)

Example

"theme_scheme_direction": "ltr"
Theme Scheme
  • Property: "theme_scheme"
  • Choices: 'light', 'dark', 'auto'

Example

"theme_scheme": "light"
Theme Color
  • Property: "theme_color"
  • Choices: 'default', 'color-1', 'color-2', 'color-3', 'color-4', 'color-5'

Example

"theme_color": { "value" : "default" }

Changing Theme Settings

There are two ways to change the theme settings:

1. Using the Live Customizer

You can work on themes using the Live Customizer in three different ways:

a. By Declaring Properties in gulp.config.json

Example gulp.config.json:

"options":{
    "saveLocal": "sessionStorage",
    "storeKey": "kivicare",
    "setting":{
        "theme_scheme_direction": { "value": "ltr" },
        "theme_scheme": { "value": "light" },
        "theme_color": { "value": "default" },
    }
},
b. By Copying Configuration from the Live Customizer
  1. Go to the Live Customizer and click the 'Copy Config' button at the top-right to copy the JSON file from the settings panel.
  2. Paste the copied code into the IQSetting(setting_options) in the setting-init.js file.
Before:
let setting_options = document.querySelector('meta[name="setting_options"]')
setting_options = JSON.parse(setting_options.getAttribute('content'))
const setting = window.IQSetting = new IQSetting(setting_options);
After:
let setting_options = document.querySelector('meta[name="setting_options"]')
setting_options = JSON.parse(setting_options.getAttribute('content'))
const setting = window.IQSetting = new IQSetting({
    "saveLocal": "sessionStorage",
    "storeKey": "kivicare",
    "setting": {
        "theme_scheme_direction": { "value": "ltr" },
        "theme_scheme": { "value": "light" },
        "theme_color": { "value": "default" },
    }
});
c. By Adding Properties in the Tag

Example <meta> tag:

<head>
    <meta name="setting_options"
    content="{
        "saveLocal":"sessionStorage",
        "storeKey":"kivicare",
        "setting":{
            "theme_scheme_direction": { "value": "ltr" },
            "theme_scheme": { "value": "light" },
            "theme_color": { "value": "default" },
        }
    }>
</head>
1. Manual Configuration

You can change the theme with a single action by adding the appropriate classes or attributes to the <body> or <html> tags.

Themes

To change the theme color, set the data-bs-theme attribute:

  • Dark theme:
    • <html data-bs-theme="dark">
    .......
</html>
  • Light theme:
    • <html data-bs-theme="light">
    .......
</html>
  • Auto theme:
    • <html data-bs-theme="auto">
    .......
</html>
Theme Direction

To change the theme direction, set the dir attribute in the <html> tag:

  • Left-to-right:
    • <html dir="ltr">
    .......
</html>
  • Right-to-left:
    • <html dir="rtl">
    .......
</html>
Theme Color

To change the theme color, set the data-bs-theme-color attribute in the <html> tag:

  • Default:
    • <html data-bs-theme-color="default">
                .......
            </html>
  • Color-1:
    • <html data-bs-theme-color="color-1">
                .......
            </html>
  • Color-2:
    • <html data-bs-theme-color="color-2">
                .......
            </html>
  • Color-3:
    • <html data-bs-theme-color="color-3">
                .......
            </html>
  • Color-4:
    • <html data-bs-theme-color="color-4">
                .......
            </html>
  • Color-5:
    • <html data-bs-theme-color="color-5">
                .......
            </html>
Previous Next