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"

Changing Theme Settings

By Declaring Properties in setting-init.js location at public/dashboard/js/setting-init.js

Example setting-init.js:

   let setting_options = {
        "saveLocal": "sessionStorage",
        "storeKey": "quisetting-html",
        "setting": {
            "app_name": {
                "value": "Streamit"
            },
            "theme_scheme_direction": {
                "value": "ltr"
            },
            "theme_scheme": {
                "value": "dark"
            },
            "theme_color": {
                "colors": {
                    "--primary": "#b00c1f",
                    "--secondary": "#adafb8",
                    "--tertiray": "#3FF0B9",
                    "--success": "#1AA053",
                    "--danger": "#C03221",
                    "--warning": "#F16A1B"
                },
                "value": "theme-color-default"
            },
            "theme_font_size": {
                "value": "theme-fs-md"
            },
            "page_layout": {
                "value": "container-fluid"
            },
            "sidebar_color": {
                "value": "sidebar-white"
            },
            "sidebar_type": {
                "value": []
            },
            "sidebar_menu_style": {
                "value": "sidebar-default navs-rounded-all"
            }
        }
    }
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>
File Structure Next