TeamPiped-mirror/Piped
1
0
Fork 0
mirror of https://github.com/TeamPiped/Piped.git synced 2024-08-14 23:57:27 +00:00
Code Issues Projects Releases Packages Wiki Activity

refacto(App.vue): change setTheme methods

Browse source
This commit is contained in:
Julien Dan 2023-10-18 16:32:02 +02:00
parent 1711b4c54b
commit 40fa94b413
1 changed files with 15 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

26
src/App.vue
View file

@ -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]);
}, },
}, },
}; };