From e87be431c57151350392336a595587ccbf2ee96b Mon Sep 17 00:00:00 2001
From: developomp <developomp@protonmail.com>
Date: Sun, 23 Mar 2025 08:14:35 +0900
Subject: [PATCH] feat(list): use css instead of JS to change ThemeController
 icon

---
 apps/list/components/ThemeController.vue | 26 ++++++++++--------------
 1 file changed, 11 insertions(+), 15 deletions(-)

diff --git a/apps/list/components/ThemeController.vue b/apps/list/components/ThemeController.vue
index a4dd007..a53aaec 100644
--- a/apps/list/components/ThemeController.vue
+++ b/apps/list/components/ThemeController.vue
@@ -1,23 +1,19 @@
 <script setup>
 const colorMode = useColorMode()
-
-const icon = computed(() => {
-    switch (colorMode.preference) {
-        case "system":
-            return "material-symbols:monitor-outline"
-        case "dark":
-            return "material-symbols:moon-stars-outline"
-        case "light":
-            return "material-symbols:sunny-outline-rounded"
-        default:
-            return "material-symbols:monitor-outline"
-    }
-})
 </script>
 
 <template>
-    <div class="flex gap-2">
-        <Icon :name="icon" size="32" />
+    <div class="flex items-center gap-2">
+        <Icon
+            class="block dark:hidden"
+            name="material-symbols:sunny-outline-rounded"
+            size="24"
+        />
+        <Icon
+            class="hidden dark:block"
+            name="material-symbols:moon-stars-outline"
+            size="24"
+        />
 
         <select
             v-model="colorMode.preference"