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": "default"

Changing Theme Settings

By Declaring Properties in setting.js

Example setting.js:

 function defaultSetting() {
    return {
      saveLocal: "sessionStorage",
      storeKey: "socialV",
      setting: defaultSettingOption(),
      beforeInit: function (cb) {
        return cb;
      },
      afterInit: function (cb) {
        return cb;
      },
    };
  }

  function defaultSettingOption() {
    return {
      theme_scheme_direction: {
        target: "html",
        choices: ["ltr", "rtl"],
        value: "ltr",
      },
      theme_scheme: {
        target: "body",
        choices: ["light", "dark", "auto"],
        value: "light",
      },
      theme_color: {
        target: "body",
        choices: [
          "theme-color-blue",
          "theme-color-red",
          "theme-color-purple",
          "theme-color-cyan",
          "theme-color-green",
        ],
        value: "theme-color-default",
      },
      sidebar_type: {
        target: '[data-toggle="main-sidebar"]',
        choices: ["sidebar-hover", "sidebar-mini", "sidebar-soft"],
        value: ["sidebar-soft"],
      },
      sidebar_menu_style: {
        target: '[data-toggle="main-sidebar"]',
        choices: [
          "navs-rounded",
          "navs-rounded-all",
          "navs-pill",
          "navs-pill-all"
        ],
        value: "navs-rounded-all",
      },
      footer: {
        target: ".footer",
        choices: ["sticky", "default"],
        value: "default",
      }
    };
  }
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>
Previous Next