fix(dark): fix dark mode selector

.changes/fix-dark-mode.md

@@ -0,0 +1,5 @@
+---
+"algohub": patch:fix
+---
+
+Fix dark mode selector for fronted

.cspell.json

@@ -2,6 +2,9 @@
     "words": [
         "algohub",
         "covector",
+        "persistedstate",
+        "pinia",
+        "primeicons",
         "primevue",
         "SWPU",
         "tailwindcss",

package.json

@@ -13,24 +13,27 @@
   "dependencies": {
     "@primevue/forms": "^4.2.2",
     "@primevue/themes": "^4.2.2",
-    "@tauri-apps/api": "^2",
-    "@tauri-apps/plugin-shell": "^2",
+    "@tauri-apps/api": "^2.1.1",
+    "@tauri-apps/plugin-shell": "^2.0.1",
     "axios": "^1.7.7",
+    "pinia": "^2.2.6",
+    "pinia-plugin-persistedstate": "^4.1.3",
+    "primeicons": "^7.0.0",
     "primevue": "^4.2.2",
-    "vue": "^3.3.4",
+    "vue": "^3.5.13",
     "vue-router": "^4.4.5",
     "zod": "^3.23.8"
   },
   "devDependencies": {
     "@primevue/auto-import-resolver": "^4.2.2",
-    "@tauri-apps/cli": "^2",
+    "@tauri-apps/cli": "^2.1.0",
     "@types/node": "^22.9.0",
-    "@vitejs/plugin-vue": "^5.0.5",
+    "@vitejs/plugin-vue": "^5.2.0",
     "covector": "^0.12.3",
     "tailwindcss": "^3.4.15",
-    "typescript": "^5.2.2",
+    "typescript": "^5.6.3",
     "unplugin-vue-components": "^0.27.4",
-    "vite": "^5.3.1",
-    "vue-tsc": "^2.0.22"
+    "vite": "^5.4.11",
+    "vue-tsc": "^2.1.10"
   }
 }

src/App.vue

@@ -1,4 +1,9 @@
 <script setup lang="ts">
+import { useThemeStore } from './scripts/store';
+
+const themeStore = useThemeStore();
+
+themeStore.init();
 </script>
 
 <template>

src/assets/tailwind.css

@@ -554,66 +554,12 @@ video {
   display: none;
 }
 
-.container {
-  width: 100%;
-}
-
-@media (min-width: 640px) {
-  .container {
-    max-width: 640px;
-  }
-}
-
-@media (min-width: 768px) {
-  .container {
-    max-width: 768px;
-  }
-}
-
-@media (min-width: 1024px) {
-  .container {
-    max-width: 1024px;
-  }
-}
-
-@media (min-width: 1280px) {
-  .container {
-    max-width: 1280px;
-  }
-}
-
-@media (min-width: 1536px) {
-  .container {
-    max-width: 1536px;
-  }
-}
-
 .m-10 {
   margin: 2.5rem;
 }
 
-.m-8 {
-  margin: 2rem;
-}
-
-.m-0 {
-  margin: 0px;
-}
-
-.m-6 {
-  margin: 1.5rem;
-}
-
-.m-3 {
-  margin: 0.75rem;
-}
-
-.mb-10 {
-  margin-bottom: 2.5rem;
-}
-
-.mt-3 {
-  margin-top: 0.75rem;
+.m-auto {
+  margin: auto;
 }
 
 .mt-6 {
@@ -644,34 +590,54 @@ video {
   max-height: 100%;
 }
 
+.max-h-screen {
+  max-height: 100vh;
+}
+
 .w-full {
   width: 100%;
 }
 
-.grid-cols-2 {
-  grid-template-columns: repeat(2, minmax(0, 1fr));
+.flex-1 {
+  flex: 1 1 0%;
 }
 
-.grid-cols-4 {
-  grid-template-columns: repeat(4, minmax(0, 1fr));
+.flex-shrink {
+  flex-shrink: 1;
 }
 
-.grid-rows-2 {
-  grid-template-rows: repeat(2, minmax(0, 1fr));
+.flex-row {
+  flex-direction: row;
 }
 
 .flex-col {
   flex-direction: column;
 }
 
+.flex-col-reverse {
+  flex-direction: column-reverse;
+}
+
+.items-start {
+  align-items: flex-start;
+}
+
 .items-center {
   align-items: center;
 }
 
+.justify-start {
+  justify-content: flex-start;
+}
+
 .justify-center {
   justify-content: center;
 }
 
+.justify-between {
+  justify-content: space-between;
+}
+
 .gap-1 {
   gap: 0.25rem;
 }
@@ -684,6 +650,10 @@ video {
   gap: 1rem;
 }
 
+.overflow-hidden {
+  overflow: hidden;
+}
+
 .p-6 {
   padding: 1.5rem;
 }
@@ -708,6 +678,11 @@ video {
   line-height: 1.25rem;
 }
 
+.text-3xl {
+  font-size: 1.875rem;
+  line-height: 2.25rem;
+}
+
 .font-bold {
   font-weight: 700;
 }
@@ -716,64 +691,51 @@ video {
   text-decoration-line: underline;
 }
 
-@media (min-width: 640px) {
-  .sm\:grid-rows-2 {
-    grid-template-rows: repeat(2, minmax(0, 1fr));
-  }
-}
-
 @media (min-width: 768px) {
-  .md\:col-span-2 {
-    grid-column: span 2 / span 2;
-  }
-
-  .md\:m-2 {
-    margin: 0.5rem;
-  }
-
-  .md\:m-10 {
-    margin: 2.5rem;
-  }
-
   .md\:m-0 {
     margin: 0px;
   }
 
-  .md\:block {
-    display: block;
-  }
-
   .md\:flex {
     display: flex;
   }
 
-  .md\:hidden {
-    display: none;
-  }
-
   .md\:h-full {
     height: 100%;
   }
 
+  .md\:flex-1 {
+    flex: 1 1 0%;
+  }
+
   .md\:grid-cols-2 {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 
   .md\:flex-row {
     flex-direction: row;
   }
-}
 
-@media (min-width: 1024px) {
-  .lg\:col-span-1 {
-    grid-column: span 1 / span 1;
+  .md\:flex-col {
+    flex-direction: column;
   }
 
-  .lg\:w-full {
-    width: 100%;
+  .md\:items-center {
+    align-items: center;
   }
 
-  .lg\:grid-rows-2 {
-    grid-template-rows: repeat(2, minmax(0, 1fr));
+  .md\:justify-center {
+    justify-content: center;
+  }
+
+  .md\:text-4xl {
+    font-size: 2.25rem;
+    line-height: 2.5rem;
+  }
+}
+
+@media (min-width: 1024px) {
+  .lg\:w-full {
+    width: 100%;
   }
 }

src/main.ts

@@ -1,5 +1,6 @@
 import "@/assets/base.css";
 import "@/assets/tailwind.css";
+import "primeicons/primeicons.css";
 
 import { createApp } from "vue";
 import App from "@/App.vue";
@@ -8,18 +9,24 @@ import Aura from "@primevue/themes/aura";
 import ToastService from "primevue/toastservice";
 
 import router from "./router";
+import { createPinia } from "pinia";
+import piniaPluginPersistedState from "pinia-plugin-persistedstate";
 
 const app = createApp(App);
 
+const pinia = createPinia();
+pinia.use(piniaPluginPersistedState);
+
+app.use(pinia);
 app.use(router);
 app.use(PrimeVue, {
   theme: {
     preset: Aura,
-  },
-  options: {
-    prefix: "p",
-    darkModeSelector: ".dark",
-    cssLayer: false,
+    options: {
+      prefix: "p",
+      darkModeSelector: ".dark",
+      cssLayer: false,
+    },
   },
 });
 app.use(ToastService);

src/scripts/store.ts

@@ -0,0 +1,36 @@
+import { defineStore } from "pinia";
+import { ref } from "vue";
+
+const prefersDarkMode = () => {
+  return (
+    window.matchMedia &&
+    window.matchMedia("(prefers-color-scheme: dark)").matches
+  );
+};
+
+export const useThemeStore = defineStore(
+  "theme",
+  () => {
+    const dark = ref<boolean | null>(null);
+    const init = () => {
+      if (dark.value === null) {
+        dark.value = prefersDarkMode();
+      }
+      if (dark.value) {
+        document.documentElement.classList.add("dark");
+      }
+    };
+    const toggle = () => {
+      dark.value = !dark.value;
+      if (dark.value) {
+        document.documentElement.classList.add("dark");
+      } else {
+        document.documentElement.classList.remove("dark");
+      }
+    };
+    return { dark, toggle, init };
+  },
+  {
+    persist: true,
+  }
+);