Documentation

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;