Theme Configuration

  • To get the default value of theme scheme or direction or theme color then navigate to the src/store/setting/state.ts this file path.
Theme_Scheme_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 two different ways:

By Declaring Properties in state.js file.

Example 

"export const defaultState: SettingDefaultState = {
  "saveLocal": "sessionStorage",
  "storeKey": "huisetting",
  "setting": {
    theme_scheme_direction: {
      target: "html",
      choices: ["ltr", "rtl"],
      type: "layout_design",
      value: "ltr",
    },
    theme_scheme: {
      target: "html",
      choices: ["light", "dark", "auto"],
      type: "layout_design",
      value: "light",
    },
    theme_color: {
      target: "html",
      choices: [ "color-1", "color-2","color-3", "color-4", "color-5", ],
      type: "default",
      colors: {},
      value: "theme-color-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:
export const defaultState: SettingDefaultState = {
  "saveLocal": "sessionStorage",
  "storeKey": "huisetting",
  "setting": {
    theme_scheme_direction: {
      target: "html",
      choices: ["ltr", "rtl"],
      type: "layout_design",
      value: "ltr",
    },
    theme_scheme: {
      target: "html",
      choices: ["light", "dark", "auto"],
      type: "layout_design",
      value: "light",
    },
    theme_color: {
      target: "html",
      choices: [ "color-1", "color-2","color-3", "color-4", "color-5", ],
      type: "default",
      colors: {},
      value: "theme-color-default",
    },
  }
};
After:
export const defaultState: SettingDefaultState = {
  "saveLocal": "sessionStorage",
  "storeKey": "huisetting",
  "setting": {
    theme_scheme_direction: {
      target: "html",
      choices: ["ltr", "rtl"],
      type: "layout_design",
      value: "rtl",
    },
    theme_scheme: {
      target: "html",
      choices: ["light", "dark", "auto"],
      type: "layout_design",
      value: "dark",
    },
    theme_color: {
      target: "html",
      choices: [ "color-1", "color-2","color-3", "color-4", "color-5", ],
      type: "default",
      colors: {},
      value: "theme-color-2",
    },
  }
};
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