fix: color mode (#679)

Co-authored-by: Alexander Lichter <github@lichter.io>
Co-authored-by: Anthony Fu <anthonyfu117@hotmail.com>

Author: 3 people

packages/devtools-ui-kit/package.json

@@ -44,7 +44,6 @@
     "@iconify-json/tabler": "^1.1.111",
     "@nuxt/devtools-kit": "workspace:*",
     "@nuxt/kit": "^3.11.2",
-    "@nuxtjs/color-mode": "^3.4.1",
     "@unocss/core": "^0.60.0",
     "@unocss/nuxt": "^0.60.0",
     "@unocss/preset-attributify": "^0.60.0",

packages/devtools-ui-kit/src/components/NDarkToggle.vue

@@ -3,7 +3,9 @@ import { computed, nextTick } from 'vue'
 
 import { useColorMode } from '@vueuse/core'
 
-const mode = useColorMode()
+const mode = useColorMode({
+  storageKey: 'nuxt-devtools-color-mode',
+})
 const isDark = computed<boolean>({
   get() {
     return mode.value === 'dark'
@@ -69,7 +71,7 @@ const context = {
 </script>
 
 <template>
-  <ColorScheme tag="span">
+  <ClientOnly placeholder-tag="span">
     <slot v-bind="context" />
-  </ColorScheme>
+  </ClientOnly>
 </template>

packages/devtools-ui-kit/src/module.ts

@@ -45,7 +45,6 @@ export default defineNuxtModule<ModuleOptions>({
     const resolver = createResolver(import.meta.url)
     await installModule(await resolver.resolvePath('@unocss/nuxt'))
     await installModule(await resolver.resolvePath('@vueuse/nuxt'))
-    await installModule(await resolver.resolvePath('@nuxtjs/color-mode'))
     await installModule(await resolver.resolvePath('v-lazy-show/nuxt'))
   },
 })

packages/devtools/client/components/ServerRouteDetails.vue

@@ -14,6 +14,7 @@ const emit = defineEmits<{
 
 const [DefineDefaultInputs, UseDefaultInputs] = createReusableTemplate()
 
+const colorMode = useColorMode()
 const config = useServerConfig()
 const client = useClient()
 
@@ -544,7 +545,7 @@ const copy = useCopy()
         <JsonEditorVue
           v-else-if="selectedTabInput === 'json'"
           v-model="routeInputBodyJSON"
-          :class="[$colorMode.value === 'dark' ? 'jse-theme-dark' : 'light']"
+          :class="colorMode === 'dark' ? 'jse-theme-dark' : 'light'"
           class="json-editor-vue of-auto text-sm outline-none"
           v-bind="$attrs"
           :mode="('text' as any)"

packages/devtools/client/components/ServerTaskDetails.vue

@@ -16,6 +16,7 @@ const routeInputBodyJSON = ref<any>({ payload: {} })
 const { inputDefaults } = useDevToolsOptions('serverRoutes')
 const [DefineDefaultInputs, UseDefaultInputs] = createReusableTemplate()
 
+const colorMode = useColorMode()
 const config = useServerConfig()
 
 const response = reactive({
@@ -310,7 +311,7 @@ const copy = useCopy()
         <JsonEditorVue
           v-else-if="selectedTabInput === 'json'"
           v-model="routeInputBodyJSON"
-          :class="[$colorMode.value === 'dark' ? 'jse-theme-dark' : 'light']"
+          :class="colorMode === 'dark' ? 'jse-theme-dark' : 'light'"
           class="json-editor-vue of-auto text-sm outline-none"
           v-bind="$attrs"
           :mode="('text' as any)"

packages/devtools/client/components/StateEditor.vue

@@ -86,7 +86,7 @@ async function refresh() {
         v-bind="$attrs"
         class="json-editor-vue"
         :class="[
-          colorMode.value === 'dark' ? 'jse-theme-dark' : '',
+          colorMode === 'dark' ? 'jse-theme-dark' : '',
           name ? '' : '',
         ]"
         :main-menu-bar="false"

packages/devtools/client/components/StorageDetails.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import JsonEditorVue from 'json-editor-vue'
 
+const colorMode = useColorMode()
 const nuxtApp = useNuxtApp()
 const router = useRouter()
 const searchString = ref('')
@@ -169,7 +170,7 @@ async function renameCurrentItem() {
         <JsonEditorVue
           v-if="typeof currentItem.content === 'object'"
           v-model="currentItem.updatedContent"
-          :class="[$colorMode.value === 'dark' ? 'jse-theme-dark' : 'light']"
+          :class="[colorMode === 'dark' ? 'jse-theme-dark' : 'light']"
           class="json-editor-vue h-full of-auto text-sm outline-none"
           v-bind="$attrs"
           :mode="('text' as any)"

packages/devtools/client/components/TimelineArgumentView.vue

@@ -26,6 +26,7 @@ const OnSetup = defineComponent({
   },
 })
 
+const colorMode = useColorMode()
 const copy = useCopy()
 </script>
 
@@ -69,7 +70,7 @@ const copy = useCopy()
             v-bind="$attrs"
             class="json-editor-vue"
             :class="[
-              $colorMode.value === 'dark' ? 'jse-theme-dark' : '',
+              colorMode === 'dark' ? 'jse-theme-dark' : '',
             ]"
             :main-menu-bar="false"
             :navigation-bar="false"

packages/devtools/package.json

@@ -91,7 +91,6 @@
     "@nuxt/content": "^2.12.1",
     "@nuxt/devtools": "workspace:*",
     "@nuxt/test-utils": "3.9.0",
-    "@nuxtjs/color-mode": "^3.4.1",
     "@parcel/watcher": "^2.4.1",
     "@types/markdown-it-link-attributes": "^3.0.5",
     "@types/ua-parser-js": "^0.7.39",