Documentation

Vue

Theme

File name:- /src/app/store/setting/state.ts
Themes values are in string type.
  1. theme_scheme_direction

    - For direction of theme there are 2 choices given below: 

    "theme_scheme_direction": "ltr",
choices: 'ltr', 'rtl'
  2. theme_scheme

    - For theme there are 3 choices given below: 

    "theme_scheme": "light",
choices: 'light', 'dark', 'auto'

There are two ways you can change the setting of your themes :

With the use of live customizer
You can work on themes using Live Customizer in three different ways:
  1. You can change the themes 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":{
        "theme_scheme_direction": { "value": "ltr" },
        "theme_scheme": { "value": "light" },
    }
},
  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": {
        "theme_scheme_direction": { "value": "ltr" },
        "theme_scheme": { "value": "light" },
    }
});
  3. You can change the themes 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":{
            "theme_scheme_direction": { "value": "ltr" },
            "theme_scheme": { "value": "light" },
        }
    }>
</head>
Manual
You can change the theme with a single action.
  1. By adding some classes in body tag . Example is given bellow.

    2. Themes

    If you wish to change the theme, you can follow the below action.

    For example you have to set theme as dark then you will have to add dark class at body tag.

    - For theme color as dark 
    <body class="..... dark">
    .......
</body>
    - For theme color as white 
    <body class="..... light">
    .......
</body>
    - For theme color as auto. 
    <body class="..... auto">
    .......
</body>

    Theme direction

    If you wish to change the theme direction, you can follow the below action.

    For example you have to set theme direction as ltr then you will have to add ltr at html tag.

    - For theme direction as left 
    <html dir="ltr">
    .......
</html>
    - For theme direction as right 
    <html dir="rtl">
    .......
</html>
Previous Next