Color Customizer
-
theme_color
- for colour customization . Colors are in array"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 color with the property name and its
value here by declaring property name and its values in
Database->Seeds->AppSettingSeeder.php
file.- This is the example ofAppSettingSeeder.php
file.'value' => '{ "saveLocal": "", "storeKey": "huisetting", "setting": { "app_name": { "value" : "Hope UI"}, "theme_color": { "value": "theme-color-default" }, } }',
php spark migrate:refresh
to save changes in database. -
You can change page-appearance from your database for
that open table with name
app_setting
.In the cloumn namevalue
change the value for variabletheme_color
for colour customizer.
Manual
You can change the color with a single action.
-
By changing some
colors
of variables in a file. Example is given below.
File Structure
- gulp+scss+hbs
- src
- assets
-
scss
-
hope-ui-design-system
- _variable.scss
-
hope-ui-design-system
-
scss
- assets
- src
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;