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', '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:

a. By Declaring Properties in gulp-config.json

Example gulp-config.json:

"options":{
    "saveLocal": "sessionStorage",
    "storeKey": "socialV",
    "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":"socialV",
        "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>
  • Color-4:
    • <html data-bs-theme-color="color-4">
    .......
</html>
  • Color-5:
    • <html data-bs-theme-color="color-5">
    .......
</html>
Previous Next