fix: make color theme picker not look shit

maybeanerd · Sep 14, 2023 · c3f6c3d · c3f6c3d
1 parent 43a79f2
commit c3f6c3d
Showing 1 changed file with 13 additions and 6 deletions.
diff --git a/components/themePicker.vue b/components/themePicker.vue
@@ -1,10 +1,11 @@
 <template>
-  <NSwitch v-model:value="isDarkTheme">
-    <template #checked-icon>
-      🌑
-    </template>
-    <template #unchecked-icon>
-      ☀️
+  <NSwitch v-model:value="isDarkTheme" :rail-style="getRailStyle">
+    <template #icon>
+      <NaiveIcon
+        :name="isDarkTheme ? 'ph:moon' : 'ph:sun'"
+        :size="14"
+        icon-color="#111827"
+      />
     </template>
   </NSwitch>
 </template>
@@ -19,4 +20,10 @@ const isDarkTheme = computed({
     colorModePreference.set(selectedColorMode);
   },
 });
+
+function getRailStyle ({ checked }: { checked: boolean }) {
+  return {
+    backgroundColor: checked ? '#1f2937' : '#e5e7eb',
+  };
+}
 </script>