fix: Optimize Dark Mode Toggle Functionality (#35)

This PR simplifies and optimizes the dark mode toggle logic. It ensures correct functionality when the color mode preference is set to 'system'. Now, the button works seamlessly for all initial states, including 'system', and correctly toggles between 'dark' and 'light' modes.

Author: zackha

app/app.vue

@@ -10,9 +10,11 @@ watch(loggedIn, () => {
   }
 })
 
-function toggleColorMode() {
-  colorMode.preference = colorMode.preference === 'dark' ? 'light' : 'dark'
-}
+const isDarkMode = computed({
+  get: () => colorMode.preference === 'dark',
+  set: () =>
+    (colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark')
+})
 
 useHead({
   htmlAttrs: { lang: 'en' },
@@ -47,8 +49,12 @@ const items = [
         square
         variant="ghost"
         color="black"
-        :icon="$colorMode.preference === 'dark' ? 'i-heroicons-moon' : 'i-heroicons-sun'"
-        @click="toggleColorMode"
+        :icon="
+          $colorMode.preference === 'dark' || $colorMode.preference === 'system'
+            ? 'i-heroicons-moon'
+            : 'i-heroicons-sun'
+        "
+        @click="isDarkMode = !isDarkMode"
       />
     </div>