From dcc412e6bce54f0229ad4fb0b40659508cec0397 Mon Sep 17 00:00:00 2001
From: Harlan Wilton <harlan@harlanzw.com>
Date: Sun, 12 Nov 2023 00:58:04 +1100
Subject: [PATCH] fix(devtools): dark mode support

---
 client/app.vue                      | 30 ++++++++++++++++++-----------
 client/components/OSectionBlock.vue |  4 ++--
 client/components/Source.vue        |  8 ++++----
 client/composables/rpc.ts           |  9 +++++++--
 4 files changed, 32 insertions(+), 19 deletions(-)

diff --git a/client/app.vue b/client/app.vue
index be38f539..467e02a4 100644
--- a/client/app.vue
+++ b/client/app.vue
@@ -2,7 +2,9 @@
 import { computed, ref } from 'vue'
 import type { SitemapDefinition } from '../src/runtime/types'
 import { loadShiki } from './composables/shiki'
+import { colorMode } from './composables/rpc'
 import { data, refreshSources } from './composables/state'
+import { useHead } from '#imports'
 
 await loadShiki()
 
@@ -39,6 +41,12 @@ function resolveSitemapOptions(definition: SitemapDefinition) {
   return options
 }
 
+useHead({
+  htmlAttrs: {
+    class: () => colorMode.value || '',
+  },
+})
+
 const appSourcesExcluded = computed(() => data.value?.runtimeConfig?.excludeAppSources || [])
 const appSources = computed(() => (data.value?.globalSources || []).filter(s => s.sourceType === 'app'))
 const userSources = computed(() => (data.value?.globalSources || []).filter(s => s.sourceType === 'user'))
@@ -67,9 +75,9 @@ const userSources = computed(() => (data.value?.globalSources || []).filter(s =>
           </div>
         </div>
         <div>
-          <a href="https://nuxtseo.com" target="_blank" class="flex items-end gap-1.5 font-semibold text-xl text-gray-700 dark:text-white font-title">
+          <a href="https://nuxtseo.com" target="_blank" class="flex items-end gap-1.5 font-semibold text-xl dark:text-white font-title">
             <NuxtSeoLogo />
-            <span class="hidden sm:block">Nuxt</span><span class="sm:text-primary-500 dark:sm:text-primary-400">SEO</span>
+            <span class="hidden sm:block">Nuxt</span><span class="sm:text-green-500 dark:sm:text-green-400">SEO</span>
           </a>
         </div>
       </div>
@@ -151,7 +159,7 @@ const userSources = computed(() => (data.value?.globalSources || []).filter(s =>
         <div v-if="tab === 'sitemaps'" class="space-y-5">
           <OSectionBlock v-for="(sitemap, key) in data.sitemaps" :key="key">
             <template #text>
-              <h3 class="text-gray-800 text-base mb-1">
+              <h3 class="opacity-80 text-base mb-1">
                 {{ sitemap.sitemapName }}
                 <NIcon v-if="(sitemap.sources || []).some(s => !!s.error)" icon="carbon:warning" class="text-red-500" />
               </h3>
@@ -164,10 +172,10 @@ const userSources = computed(() => (data.value?.globalSources || []).filter(s =>
             <div class="px-3 py-2 space-y-5">
               <template v-if="sitemap.sitemapName === 'index'">
                 <div>
-                  <div class="text-sm mb-1 text-gray-800">
+                  <div class="text-sm mb-1 opacity-80">
                     This is a special sitemap file that links to your other sitemaps.
                   </div>
-                  <div class="text-sm text-gray-700">
+                  <div class="text-sm opacity-70">
                     You can learn about this on the <NLink underline target="_blank" href="https://developers.google.com/search/docs/crawling-indexing/sitemaps/large-sitemaps">
                       Google Search Central
                     </NLink>.
@@ -176,7 +184,7 @@ const userSources = computed(() => (data.value?.globalSources || []).filter(s =>
               </template>
               <template v-else>
                 <div v-if="sitemap.sources && sitemap.sources.length" class="flex space-x-5">
-                  <div>
+                  <div class="w-40">
                     <div class="font-bold text-sm mb-1">
                       Sources
                     </div>
@@ -184,12 +192,12 @@ const userSources = computed(() => (data.value?.globalSources || []).filter(s =>
                       Local sources associated with just this sitemap.<br>Example: Load in a dynamic list of URLs from an API endpoint.
                     </div>
                   </div>
-                  <div class="bg-gray-50 flex-grow">
+                  <div class="flex-grow">
                     <Source v-for="(source, k) in sitemap.sources" :key="k" :source="source" />
                   </div>
                 </div>
                 <div class="flex space-x-5">
-                  <div>
+                  <div class="w-40">
                     <div class="font-bold text-sm mb-1">
                       App Sources
                     </div>
@@ -199,7 +207,7 @@ const userSources = computed(() => (data.value?.globalSources || []).filter(s =>
                       </NLink> tab.
                     </div>
                   </div>
-                  <div class="bg-red-50/35 rounded flex-grow flex items-center px-3">
+                  <div class="flex-grow flex items-center">
                     <div v-if="sitemap.includeAppSources && appSourcesExcluded !== true" class="opacity-70">
                       <NIcon icon="carbon:checkmark" class="text-green-500 text-lg" />
                       Enabled
@@ -211,7 +219,7 @@ const userSources = computed(() => (data.value?.globalSources || []).filter(s =>
                   </div>
                 </div>
                 <div class="flex space-x-5">
-                  <div>
+                  <div class="w-40">
                     <div class="font-bold text-sm mb-1">
                       Sitemap Options
                     </div>
@@ -219,7 +227,7 @@ const userSources = computed(() => (data.value?.globalSources || []).filter(s =>
                       Extra options used to filter the URLs on the final sitemap and set defaults.
                     </div>
                   </div>
-                  <div class="bg-gray-50 flex-grow">
+                  <div class="n-bg-base/20 flex-grow">
                     <OCodeBlock class="max-h-[350px] min-h-full overflow-y-auto" :code="JSON.stringify(resolveSitemapOptions(sitemap), null, 2)" lang="json" />
                   </div>
                 </div>
diff --git a/client/components/OSectionBlock.vue b/client/components/OSectionBlock.vue
index 41a2b3b6..4154dde3 100644
--- a/client/components/OSectionBlock.vue
+++ b/client/components/OSectionBlock.vue
@@ -28,7 +28,7 @@ function onToggle(e: any) {
 
 <template>
   <details :open="open" @toggle="onToggle">
-    <summary class="cursor-pointer select-none hover:bg-active p4 bg-gray-50 hover:bg-gray-100 rounded transition-all" :class="collapse ? '' : 'pointer-events-none'">
+    <summary class="cursor-pointer select-none n-bg-active hover:bg-active p4 rounded transition-all" :class="collapse ? '' : 'pointer-events-none'">
       <NIconTitle :icon="icon" :text="text" text-xl transition :class="[open ? 'op100' : 'op60', headerClass]">
         <div>
           <div text-base>
@@ -57,7 +57,7 @@ function onToggle(e: any) {
       :class="typeof padding === 'string' ? padding : padding ? 'px4' : ''"
     >
       <slot name="details" />
-      <div :class="containerClass" class="mt1 border-gray-100 border-1">
+      <div :class="containerClass" class="mt1">
         <slot />
       </div>
       <slot name="footer" />
diff --git a/client/components/Source.vue b/client/components/Source.vue
index b4fd79bd..0a145d25 100644
--- a/client/components/Source.vue
+++ b/client/components/Source.vue
@@ -15,10 +15,10 @@ const fetchUrl = computed(() => {
   <OSectionBlock>
     <template #text>
       <div class="flex space-x-5">
-        <h3 class="text-gray-800 text-base mb-1 flex space-x-3 items-center">
+        <h3 class="opacity-80 text-base mb-1 flex space-x-3 items-center">
           <div v-if="source.fetch" class="flex space-x-2">
-            <NIcon icon="carbon:api-1" class="text-gray-500 text-lg" />
-            <div v-if="source.timeTakenMs" class="text-gray-600 text-sm">
+            <NIcon icon="carbon:api-1" class="opacity-50 text-lg" />
+            <div v-if="source.timeTakenMs" class="opacity-60 text-sm">
               {{ source.timeTakenMs }}ms
             </div>
           </div>
@@ -48,7 +48,7 @@ const fetchUrl = computed(() => {
     </div>
     <template v-else>
       <OCodeBlock class="max-h-[250px] overflow-y-auto" :code="JSON.stringify(source.urls, null, 2)" lang="json" />
-      <div v-if="source.context.tips" class="px-3 py-3 mt-2 bg-gray-50/50 text-gray-700">
+      <div v-if="source.context.tips" class="px-3 py-3 mt-2 bg-gray-50/50 opacity-70">
         <h3 class="text-sm font-bold mb-1">
           Hints
         </h3>
diff --git a/client/composables/rpc.ts b/client/composables/rpc.ts
index 16bb6ab8..0964d6e9 100644
--- a/client/composables/rpc.ts
+++ b/client/composables/rpc.ts
@@ -1,15 +1,20 @@
 import { onDevtoolsClientConnected } from '@nuxt/devtools-kit/iframe-client'
 import type { $Fetch } from 'nitropack'
-import { ref } from 'vue'
-import type { NuxtDevtoolsClient } from '@nuxt/devtools-kit/dist/types'
+import { ref, watchEffect } from 'vue'
+import type { NuxtDevtoolsClient } from '@nuxt/devtools-kit/types'
 import { refreshSources } from './state'
 
 export const appFetch = ref<$Fetch>()
 
 export const devtools = ref<NuxtDevtoolsClient>()
 
+export const colorMode = ref<'dark' | 'light'>()
+
 onDevtoolsClientConnected(async (client) => {
   appFetch.value = client.host.app.$fetch
+  watchEffect(() => {
+    colorMode.value = client.host.app.colorMode.value
+  })
   devtools.value = client.devtools
   refreshSources()
 })