DOCUMENTATION

Themes

Themes values are in string type.

  1. theme_scheme_direction
    - For direction of theme there are 2 choices given below:
            
"theme_scheme_direction": "ltr",
choices: 'ltr', 'rtl'
  2. theme_scheme
    - For theme there are 3 choices given below:
    
"theme_scheme": "light",
choices: 'light', 'dark', 'auto'

There are two ways you can change the setting of your themes :

With the use of live customizer

You can work on themes using Live Customizer in following way:

  1. You can change the page style and its appearance with the property name and its value here by declaring property name and its values in gulp.config.json file.

    - This is the example of gulp.config.json file 

    
"options":{
"saveLocal": "sessionStorage",
"storeKey": "huisetting",
"setting":{
    "app_name": { "value" : "Hope UI" },
    "page_layout": {"value" : "container-fluid"},
    "theme_transition": {"value" : "theme-with-animation"},
    "card_color": {"value" : "card-glass"},
    "theme_style_appearance": {"value": []}
}
},

Manual

You can change the theme with a single action.

  1. By adding some classes in body tag . Example is given bellow.

    Themes

    If you wish to change the page style, you can follow the below action.

    For example you have to set theme as dark then you will have to add dark class at body tag.

    - For theme color as dark

    <body class=".....dark">
  ....
</body>

    - For theme color as white

    <body class=".....light">
  ....
</body>

    - For theme color as auto.

    <body class=".....auto">
  ....
</body>

    Theme direction

    If you wish to change the page style, you can follow the below action.

    For example you have to set theme direction asltr then you will have to addltrathtml tag.

    - For theme direction as left

    <html dir="ltr">
  .....
</html>

    - For theme direction as right

    <html dir="rtls">
  .....
</html>
Previous Next
Updated on February 28, 2022
Was this page helpful?