improve ThemeController design

apps/rank/components/ThemeController.vue

@@ -1,9 +1,24 @@
 <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>
-    <p class="p-4 pb-2">
+    <div class="flex justify-end gap-2 p-2">
+        <Icon :name="icon" size="32" />
+
         <select
             v-model="colorMode.preference"
             class="h-8 w-24 border dark:border-gray-700 dark:bg-gray-900 dark:text-white"
@@ -12,5 +27,5 @@ const colorMode = useColorMode()
             <option value="light">Light</option>
             <option value="dark">Dark</option>
         </select>
-    </p>
+    </div>
 </template>

apps/rank/nuxt.config.ts

@@ -9,6 +9,7 @@ export default defineNuxtConfig({
         "@nuxtjs/color-mode",
         "@nuxtjs/tailwindcss",
         "@nuxtjs/google-fonts",
+        "@nuxt/icon",
     ],
     app: {
         head: {

apps/rank/package.json

@@ -10,6 +10,7 @@
         "postinstall": "nuxt prepare"
     },
     "dependencies": {
+        "@nuxt/icon": "1.11.0",
         "@nuxtjs/color-mode": "3.5.2",
         "@nuxtjs/google-fonts": "3.2.0",
         "@pompydev/prettier-config": "workspace:*",