Looking for Vue, React, Angular, Laravel Version? Click here to Get 5 in 1 JS Bundle.

Color Customizer

  1. theme_color
    - for colour customization . Colors are in array
    "theme_color": "theme-color-default",
    "colors": {
            "--primary": "#7016d0",
            "--secondary": "#aca4bc",
            "--tertiray": "#3FF0B9"
        },
    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": "quisetting",
        "setting":{
            "app_name": { "value" : "Qompac-Ui" },
            "theme_color": {
                "colors": {
                    "colors": {
                        "--primary": "#7016d0",
                        "--secondary": "#aca4bc",
                        "--tertiray": "#3FF0B9"
                    },
                },
                "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": "quisetting",
        "setting": {
            "app_name": {"value": "Qompac-Ui"},
            "theme_color": {
                "colors": {
                    "colors": {
                        "--primary": "#7016d0",
                        "--secondary": "#aca4bc",
                        "--tertiray": "#3FF0B9"
                    },
                },
                "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":"quisetting",
            "setting":{
                "app_name":{"value":"Qompac-Ui"},
               "theme_color": {
                "colors": {
                    "colors": {
                        "--primary": "#7016d0",
                        "--secondary": "#aca4bc",
                        "--tertiray": "#3FF0B9"
                    },
                },
                "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
            • qompac-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:   #7016d0 !default;
    $secondary: #aca4bc !default;