mirror of
https://github.com/TeamPiped/Piped.git
synced 2024-11-10 02:08:21 +00:00
refacto(App.vue): change setTheme methods
This commit is contained in:
parent
1711b4c54b
commit
40fa94b413
26
src/App.vue
26
src/App.vue
@ -95,21 +95,25 @@ export default {
|
|||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
setTheme() {
|
setTheme() {
|
||||||
let themePref = this.getPreferenceString("theme", "dark");
|
let themePref = this.getPreferenceString("theme", "dark"); // dark, light or auto
|
||||||
if (themePref == "auto") this.theme = darkModePreference.matches ? "dark" : "light";
|
const themes = {
|
||||||
else this.theme = themePref;
|
dark: "dark",
|
||||||
|
light: "light",
|
||||||
|
auto: darkModePreference.matches ? "dark" : "light",
|
||||||
|
};
|
||||||
|
|
||||||
// Change title bar color based on user's theme
|
this.theme = themes[themePref];
|
||||||
const themeColor = document.querySelector("meta[name='theme-color']");
|
|
||||||
if (this.theme === "light") {
|
this.changeTitleBarColor();
|
||||||
themeColor.setAttribute("content", "#FFF");
|
|
||||||
} else {
|
|
||||||
themeColor.setAttribute("content", "#0F0F0F");
|
|
||||||
}
|
|
||||||
|
|
||||||
// Used for the scrollbar
|
// Used for the scrollbar
|
||||||
const root = document.querySelector(":root");
|
const root = document.querySelector(":root");
|
||||||
this.theme == "dark" ? root.classList.add("dark") : root.classList.remove("dark");
|
this.theme === "dark" ? root.classList.add("dark") : root.classList.remove("dark");
|
||||||
|
},
|
||||||
|
changeTitleBarColor() {
|
||||||
|
const currentColor = { dark: "#0F0F0F", light: "#FFF" };
|
||||||
|
const themeColor = document.querySelector("meta[name='theme-color']");
|
||||||
|
themeColor.setAttribute("content", currentColor[this.theme]);
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
Loading…
Reference in New Issue
Block a user