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.
  • You can change page-appearance from your database for that open table with name app_setting.In the cloumn name value change the value for variable theme_color for colour customizer.
Manual

You can change the fonts 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

    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;