Theme Configuration

Themes values are in string type.

theme direction

for direction of theme there are 2 choices given below:

  • Property: "theme_scheme_direction"
  • Choices: 'ltr' (left-to-right), 'rtl' (right-to-left)

Example

"theme_scheme_direction": "ltr"
Theme Scheme

for theme there are 3 choices given below:

  • Property: "theme_scheme"
  • Choices: 'light', 'dark', 'auto'

Example

"theme_scheme": "light"

for direction of theme there are 2 choices given below:

With the use of live customizer

You can work on themes using Live Customizer in two different ways:

  • You can change the themes with the property name and its value here by declaring property name and its values in database->seeder
    ->AppSettingTableSeeder.php file.
    -This is the example of AppSettingTableSeeder.php file. 
    'value' => '{
                "saveLocal": "",
                "storeKey": "huisetting",
                "setting": {
                    "app_name": { "value" : "Hope UI"},
                    "theme_scheme_direction": { "value": "ltr" },
                    "theme_scheme": { "value": "light" },
                }
            }',
    • After making changes in seeder it is necessary to run php artisan migrate:fresh --seed to save changes in database.
  • 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 work on themes using Live Customizer in two different ways:

  • By adding some classes in body tag . Example is given bellow.
    • 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 dark

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

    - For theme color as auto.

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

    Manual

    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 left

    <html dir="rtl">
    .......
</html>
File Structure Next