Dashboard 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": { "value" : "ltr" }
Theme Scheme
  • Property: "theme_scheme"
  • Choices: 'light', 'dark', 'auto'

Example

"theme_scheme": { "value" : "light" }
Theme Color
  • Property: "theme_color"
  • Choices: 'default', 'color-1', 'color-2', 'color-3'

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:

a. By Declaring Properties in setting.js located at assets/js/iqonic-script/setting.js

Example setting.js:

"options":{
    "saveLocal": "sessionStorage",
    "storeKey": "streamit",
    "setting":{
        "theme_scheme_direction": { "value": "ltr" },
        "theme_scheme": { "value": "light" },
        "theme_color": { "value": "default" },
    }
},
b. By Adding Properties in the Tag

Example <meta> tag:

<head>
    <meta name="setting_options"
    content="{
        "saveLocal":"sessionStorage",
        "storeKey":"streamit",
        "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 attributes to the <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>

Frontend 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": { "value" : "ltr" }
Theme Color
  • Property: "theme_color"
  • Choices: 'netflix', 'hostar', 'prime', 'hulu'

Example

"theme_color": { "value" : "netflix" }

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:

a. By Declaring Properties in setting.js located at assets/js/iqonic-script/setting.js

Example setting.js:

"options":{
    "saveLocal": "sessionStorage",
    "storeKey": "streamit",
    "setting":{
        "theme_scheme_direction": { "value": "ltr" },
        "theme_color": { "value": "netflix" },
    }
},
b. By Adding Properties in the Tag

Example <meta> tag:

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

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

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:

  • Netflix:
    • <html data-bs-theme-color="netflix">
    .......
</html>
  • Hotstar:
    • <html data-bs-theme-color="hotstar">
    .......
</html>
  • Prime:
    • <html data-bs-theme-color="prime">
    .......
</html>
  • Hulu:
    • <html data-bs-theme-color="hulu">
    .......
</html>
Previous Next