Documentation

Vue

Theme

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 three different ways:
  1. You can change the themes with the property name and its value here by declaring property name and its values in file.
    Database->Seeds->AppSettingSeeder.php 
    'value' => '{
                "saveLocal": "",
                "storeKey": "huisetting",
                "setting": {
                    "app_name": { "value" : "Hope UI"},
                    "theme_scheme_direction": { "value": "ltr" },
                    "theme_scheme": { "value": "light" },
                }
            }',
  2. You can change theme from your database for that open table with name app_setting.In the cloumn name value change the value for variable theme_scheme for theme light or dark and theme_scheme_direction for direction.
Manual
You can change the theme with a single action.
  1. By adding some classes in body tag . Example is given bellow.

    2. Themes

    If you wish to change the theme, 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 theme direction, you can follow the below action.

    For example you have to set theme direction as ltr then you will have to add ltr at html tag.

    - For theme direction as left 
    <html dir="ltr">
    .......
</html>
    - For theme direction as right 
    <html dir="rtl">
    .......
</html>
Previous Next