Move theme handling away from mixin.

This commit is contained in:
Kavin 2022-10-10 10:13:21 +01:00
parent 9621c346c0
commit 2fb5aa2bec
No known key found for this signature in database
GPG key ID: 49451E4482CC5BCD
2 changed files with 19 additions and 14 deletions

View file

@ -15,12 +15,31 @@
<script>
import NavBar from "./components/NavBar.vue";
import FooterComponent from "./components/FooterComponent.vue";
const darkModePreference = window.matchMedia("(prefers-color-scheme: dark)");
export default {
components: {
NavBar,
FooterComponent,
},
data() {
return {
theme: "dark",
};
},
methods: {
setTheme() {
let themePref = this.getPreferenceString("theme", "dark");
if (themePref == "auto") this.theme = darkModePreference.matches ? "dark" : "light";
else this.theme = themePref;
},
},
mounted() {
this.setTheme();
darkModePreference.addEventListener("change", () => {
this.setTheme();
});
if (this.getPreferenceBoolean("watchHistory", false))
if ("indexedDB" in window) {
const request = indexedDB.open("piped-db", 1);

View file

@ -64,7 +64,6 @@ import "@unocss/reset/tailwind.css";
import "uno.css";
const timeAgo = new TimeAgo("en-US");
const darkModePreference = window.matchMedia("(prefers-color-scheme: dark)");
import("./registerServiceWorker");
@ -239,14 +238,6 @@ const mixin = {
},
},
computed: {
theme() {
this.refreshTheme; // forces Vue to recompute the value when the var gets changed
let themePref = this.getPreferenceString("theme", "dark");
if (themePref == "auto") {
return darkModePreference.matches ? "dark" : "light";
}
return themePref;
},
authenticated(_this) {
return _this.getAuthToken() !== undefined;
},
@ -275,13 +266,8 @@ const mixin = {
return {
TimeAgo: TimeAgo,
TimeAgoConfig: timeAgo,
refreshTheme: 0,
};
},
mounted() {
// Forces the app to recompute the theme class
darkModePreference.addEventListener("change", () => this.refreshTheme++);
},
};
const i18n = createI18n({