Finished integrating Shadow DOM icons, first steps towards dynamic theme

composables/useCustomTheme.ts

@@ -1,18 +0,0 @@
-import { useDark, useToggle } from '@vueuse/core'
-
-export function useCustomTheme() {
-  const { $vuetify } = useNuxtApp()
-
-  const isDark = useDark({
-    valueDark: 'dark',
-    valueLight: 'light',
-    initialValue: 'light',
-    onChanged: (dark: boolean) => {
-      $vuetify.theme.global.name.value = dark ? 'dark' : 'light'
-    },
-  })
-
-  const toggle = useToggle(isDark)
-
-  return { isDark, toggle }
-}

composables/useVThemeSSR.ts

@@ -0,0 +1,20 @@
+import { useDark, useToggle } from '@vueuse/core'
+
+export default function () {
+  const { $vuetify } = useNuxtApp()
+  const config = useAppConfig()
+
+  const dark = useDark({
+    valueLight: config.theme.light,
+    valueDark: config.theme.dark,
+    onChanged: (dark: boolean) => {
+      $vuetify.theme.global.name.value = dark
+        ? config.theme.dark
+        : config.theme.light
+    },
+  })
+
+  const toggle = useToggle(dark)
+
+  return { dark, toggle }
+}