Requirements

Source & Credits

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" : "Muzik" },
        "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": "Muzik"},
        "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":"Muzik"},
           "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
            • Muzik-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;
Previous Next