Theme Configuration

The theme values are of string type and can be configured as follows:

Theme Direction
  • Property: "theme_scheme_direction"
  • Choices: 'ltr' (left-to-right), 'rtl' (right-to-left)

Example

"theme_scheme_direction": {
    "value": "ltr"
},
Theme Scheme
  • Property: "theme_scheme"
  • Choices: "light", "dark", "auto"

Example

"theme_scheme": {
    "value": "light"
},
Theme Color
  • Property: "theme_color"
  • Choices: "default", "color-1", "color-2", "color-3", "color-4", "color-5"

Example

"theme_color": {
    value: 'default'
},

Changing Theme Settings

1. Using the Live Customizer

You can use Live Customizer by using Properties:

By Declaring Properties in state.js file.

Example 

export const initialState = {
  saveLocal: 'sessionStorage',
  storeKey: 'huisetting-vue',
  setting: {
    app_name: {
      value: 'Hope UI'
    },
    theme_scheme_direction: {
      value: 'ltr'
    },
    theme_scheme: {
      value: 'dark'
    },
    theme_color: {
      value: 'default'
    },
  }
To get the current value of the following you can use:
  • first import useSetting store from pinia
  • import the selectors files from src/store/pinia/index.js in your component 
import { useSetting } from "@/store/pinia";
Then use the following code in your component to get the current value
  • accessing the state from the useSetting store 
const store = useSetting();
  • creating computed properties to reactively access the store's state
theme_scheme
const themeScheme = computed(() => store.theme_scheme_value)
theme_scheme_direction
const themeSchemeDirection = computed(() => store.theme_scheme_direction_value)
theme_color
const themeColor = computed(() => store.theme_color)
Installation Next