Theme Configuration

"theme_scheme_direction": {
    "value": "ltr"
},

"theme_scheme": {
    "value": "light"
},

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

Changing Theme Settings

There are two ways to change the 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: 'streamitsetting-vue',
  setting: {
    app_name: {
      value: 'Streamit'
    },
    theme_scheme_direction: {
      value: 'ltr'
    },
    theme_scheme: {
      value: 'dark'
    },
    theme_color: {
      colors: {},
      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 this file as top of your component using following example code 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)

theme_scheme_direction

const themeSchemeDirection = computed(() => store.theme_scheme_direction_value)

theme_color

const themeColor = computed(() => store.setting.theme_color.value)

Theme

• To get the default value of theme scheme or direction , theme color go to the frontend/src/store/setting/state.js

Theme Scheme Direction

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

Example

"theme_scheme_direction": {
    "value": "ltr"
},
                

Theme Color

• Property: "theme_style_appearance"
• Choices: "dark","hotstar","amezonprime","hulu"

Example

theme_style_appearance: {
    value: 'dark',
}

To get the current value of the following you can use:

• import this file as top of your component using following example code in your component

import { useSetting } from "../../store/setting/index";

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_direction

const themeSchemeDirection = computed(() => store.theme_scheme_direction_value)