🐛 Fix colorscheme

app/composables/useCustomTheme.ts

@@ -1,22 +0,0 @@
-import { useDark, useToggle } from "@vueuse/core"
-
-// composables/useCustomTheme.ts
-export function useCustomTheme(): {
-  isDark: WritableComputedRef<boolean, boolean>
-  toggle: (value?: boolean | undefined) => boolean,
-} {
-  const { $vuetify } = useNuxtApp()
-
-  const isDark = useDark({
-    valueDark: "dark",
-    valueLight: "light",
-    initialValue: "light",
-    onChanged: (dark: boolean) => {
-      $vuetify.theme.change(dark ? "dark" : "light")
-    }
-  })
-
-  const toggle = useToggle(isDark)
-
-  return { isDark, toggle }
-}

app/layouts/default.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-app :theme="isDark ? 'dark' : 'light'">
+  <v-app :theme="colorMode.preference">
     <v-app-bar flat class="app-bar-blur">
       <v-container class="mx-auto d-flex align-center justify-center">
         <v-btn
@@ -30,13 +30,12 @@
 </template>
 
 <script lang="ts" setup>
-import { useCustomTheme } from "~/composables/useCustomTheme"
 import type { NavLink } from "~/types/navlink"
 
 const apiBase = useSolarNetworkUrl()
+const colorMode = useColorMode()
 
 const { user } = useUserStore()
-const { isDark } = useCustomTheme()
 
 const links: NavLink[] = [
   {

app/layouts/minimal.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-app :theme="isDark ? 'dark' : 'light'">
+  <v-app :theme="colorMode.preference">
     <v-app-bar flat height="48">
       <v-container class="mx-auto d-flex align-center justify-center">
         <p class="text-sm">Solar Network</p>
@@ -13,7 +13,5 @@
 </template>
 
 <script lang="ts" setup>
-import { useCustomTheme } from "~/composables/useCustomTheme"
-
-const { isDark } = useCustomTheme()
+const colorMode = useColorMode()
 </script>