C
I created the following Vuex module to switch between a Light and Dark theme.
import { colors } from "quasar";
const themes = {
namespaced: true,
state: { name: "Light" },
mutations: {
SET_THEME(state, newTheme) {
state.name = newTheme.name;
colors.setBrand("primary", newTheme.primary);
colors.setBrand("secondary", newTheme.secondary);
colors.setBrand("accent", newTheme.accent);
}
},
actions: {
ChangeTheme(context) {
if (context.state.name == "Dark") {
context.commit("SET_THEME", lightTheme);
} else {
context.commit("SET_THEME", darkTheme);
}
}
}
};
const darkTheme = {
name: "Dark",
primary: "#222222",
secondary: "#111111",
accent: "#333333"
};
const lightTheme = {
name: "Light",
primary: "#cce6ff",
secondary: "#0052a3",
accent: "#f57b00"
};
export default themes;
Missing currently are some of the text colors which seem to be set through classes not a palette.
Just call this to flip between the themes:
this.$store.dispatch("themes/ChangeTheme");
