Utilizing vue.js along with vuetify, I have a boolean value stored in state via Vuex defined in src/store/index.ts (named darkMode). This value is used within one of my view components inside a .vue file. However, I now wish to access the same variable in my typescript file where I house my vuetify settings (src/plugins/vuetify.ts). Is this feasible? As I am new to vue.js/vuetify/typescript, any guidance would be greatly appreciated.
Below is a snippet of my code:
// src/plugins/vuetify.ts
import Vue from "vue";
import Vuetify from "vuetify/lib/framework";
Vue.use(Vuetify);
export default new Vuetify({
theme: {
dark: darkMode, // <--- HERE IS WHERE I WANT TO USE MY VARIABLE FROM STATE
themes: {
light: {
primary: "#32A4A0",
secondary: "#C83C96",
background: "#FFFFFF",
border: "BEBEBE",
warning: "#FFE011",
error: "#F40808",
},
dark: {
primary: "#4EC0EB",
secondary: "#FF79C0",
background: "#353535",
border: "BEBEBE",
warning: "#FFE011",
error: "#F40808",
},
},
},
});
The folder structure is as follows:
src
---store
------index.ts
---plugins
------vuetify.ts
Any assistance provided would be highly valued!