Color Customizer
theme_color
for colour customization . Colors are in array
Example
"theme_color": "theme-color-default",
colors: {
"--primary": "#3a57e8",
"--info": "#08B1BA",
},
choices: 'theme-color-default', 'theme-color-blue', 'theme-color-gray', 'theme-color-red', 'theme-color-yellow', 'theme-color-pink'
There are two ways you can change the setting of your color customizer:
With the use of live customizer
You can work on color customizer 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_color": { "value": "theme-color-default" },
}
}',
After making changes in seeder it is necessary to run php artisan migrate:fresh --seed to save changes in database.
Manual
You can change the fonts with a single action.
- By changing some colors of variables in a file. Example is given below.
- gulp+scss+hbs
- src
- assets
-
scss
-
hope-ui-design-system
- _variable.scss
-
hope-ui-design-system
-
scss
- assets
- src
File Structure
If you wish to change the color of defined variable, you can follow the below action.
For example you have to change the color of variable $primary as #6610f2 then change the variable color in variable.scss file.
$primary: #6610f2 !default;
$info: $#3a57e8 !default;