export default { data() { return { system: (window.matchMedia("(prefers-color-scheme: dark)").matches) ? "dark" : "light", userTheme: localStorage.theme, userHeartbeatBar: localStorage.heartbeatBarTheme, statusPageTheme: "light", forceStatusPageTheme: false, path: "", }; }, mounted() { // Default Light if (! this.userTheme) { this.userTheme = "auto"; } // Default Heartbeat Bar if (!this.userHeartbeatBar) { this.userHeartbeatBar = "normal"; } document.body.classList.add(this.theme); this.updateThemeColorMeta(); }, computed: { theme() { // As entry can be status page now, set forceStatusPageTheme to true to use status page theme if (this.forceStatusPageTheme) { return this.statusPageTheme; } // Entry no need dark if (this.path === "") { return "light"; } if (this.path.startsWith("/status-page") || this.path.startsWith("/status")) { return this.statusPageTheme; } else { if (this.userTheme === "auto") { return this.system; } return this.userTheme; } } }, watch: { "$route.fullPath"(path) { this.path = path; }, userTheme(to, from) { localStorage.theme = to; }, theme(to, from) { document.body.classList.remove(from); document.body.classList.add(this.theme); this.updateThemeColorMeta(); }, userHeartbeatBar(to, from) { localStorage.heartbeatBarTheme = to; }, heartbeatBarTheme(to, from) { document.body.classList.remove(from); document.body.classList.add(this.heartbeatBarTheme); } }, methods: { updateThemeColorMeta() { if (this.theme === "dark") { document.querySelector("#theme-color").setAttribute("content", "#161B22"); } else { document.querySelector("#theme-color").setAttribute("content", "#5cdd8b"); } } } };