✨ feat: add server-status theme (#295)

* ✨ feat: add server-status theme * add `ServerStatus` theme to README --------- Co-authored-by: naiba <hi@nai.ba>
2026-09-21 02:30:14 +00:00 · 2023-11-07 13:46:28 +08:00
parent 5ab46b9ebb
commit 0f8bfc21ad
27 changed files with 1660 additions and 13 deletions
@@ -0,0 +1,49 @@
+const mixinsVue = {
+    data: {
+        cache: [],
+        theme: "light",
+        isSystemTheme: false
+    },
+    created() {
+        this.initTheme()
+    },
+    methods: {
+        setTheme(title, store = false) {
+            this.theme = title
+            document.body.setAttribute("theme", title)
+            if (store) {
+                localStorage.setItem("theme", title)
+                this.isSystemTheme = false
+            }
+        },
+        setSystemTheme() {
+            localStorage.removeItem("theme")
+            this.initTheme()
+            this.isSystemTheme = true
+        },
+        initTheme() {
+            const storeTheme = localStorage.getItem("theme")
+            if (storeTheme === 'dark' || storeTheme === 'light') {
+                this.setTheme(storeTheme, true);
+            } else {
+                this.isSystemTheme = true
+                const handleChange = (mediaQueryListEvent) => {
+                    if (localStorage.getItem("theme")) {
+                        return
+                    }
+                    if (mediaQueryListEvent.matches) {
+                        this.setTheme('dark');
+                    } else {
+                        this.setTheme('light');
+                    }
+                }
+                const mediaQueryListDark = window.matchMedia('(prefers-color-scheme: dark)');
+                this.setTheme(mediaQueryListDark.matches ? 'dark' : 'light');
+                mediaQueryListDark.addEventListener("change", handleChange);
+            }
+        },
+        toFixed2(f) {
+            return f.toFixed(2)
+        },
+    }
+}