Documentation

Vue

Color Customizer

File name:- /src/app/store/setting/state.ts
  1. 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 three different ways:
  1. You can change the color with the property name and its value here by declaring property name and its values in gulp.config.json file.
    - This is the example of gulp.config.json file.
    "options":{
    "saveLocal": "sessionStorage",
    "storeKey": "huisetting",
    "setting":{
        "app_name": { "value" : "Hope UI" },
        "theme_color": {
            "colors": {
                "--primary": "#EA6A12",
                "--info": "#6410F1"
            },
            "value": "theme-color-yellow"
        },    
    }
},
  2. Go to the live customizer and click on the 'Copy Config' button available at the top-right to copy the json file from the setting panel. Paste the copied code in the IQSetting(setting_options) at the setting-init.js file.
    - Before
    let setting_options = document.querySelector('meta[name="setting_options"]')
setting_options = JSON.parse(setting_options.getAttribute('content'))
const setting = window.IQSetting = new IQSetting(setting_options);
    - After
    let setting_options = document.querySelector('meta[name="setting_options"]')
setting_options = JSON.parse(setting_options.getAttribute('content'))
const setting = window.IQSetting = new IQSetting({
    "saveLocal": "sessionStorage",
    "storeKey": "huisetting",
    "setting": {
        "app_name": {"value": "Hope UI"},
        "theme_color": {
            "colors": {
                "--primary": "#EA6A12",
                "--info": "#6410F1"
            },
            "value": "theme-color-yellow"
        },
    }
});
  3. You can change the color by adding property name and its values in the <meta> tag given in <head> section.
    - This is the example of <meta> data 
    <head>
    <meta name="setting_options"
    content="{
        "saveLocal":"sessionStorage",
        "storeKey":"huisetting",
        "setting":{
            "app_name":{"value":"Hope UI"},
           "theme_color": {
            "colors": {
                "--primary": "#EA6A12",
                "--info": "#6410F1"
            },
            "value": "theme-color-yellow"
            },
        }
    }>
</head>
Manual
You can change the color with a single action.
  1. By changing some colors of variables in a file. Example is given below.

    2. 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;
Previous Next