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

Requirements

Source & Credits

HTML Change Log

HTML Upgrade Guide

Color Customizer

  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