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

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": "hopeui",
    "setting":{
        "theme_scheme_direction": { "value": "ltr" },
        "theme_scheme": { "value": "light" },
    }
},
b. By Adding Properties in the Tag

Example <meta> tag:

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

You can change the theme with a single action by adding the appropriate classes to the <body> tag.

Themes

To change the theme scheme, add the class in the <body>:

  • Dark theme:
    • <body class="dark">
    .......
</body>
  • Light theme:
    • <body class="light">
    .......
</body>
  • Auto theme:
    • <body class="auto">
    .......
</body>
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>
Note: The Choices given are the only choices available for customization
Previous Next