From 429fe5c612a5c585809c0ed2eaff8ba760915739 Mon Sep 17 00:00:00 2001
From: Alex <alexzhang1030@foxmail.com>
Date: Tue, 5 Nov 2024 22:46:22 +0800
Subject: [PATCH 1/7] feat: refine bg/text color for dark mode

---
 packages/applet/uno.config.ts   | 4 ++--
 packages/client/uno.config.ts   | 4 ++--
 packages/ui/theme/uno.config.ts | 6 +++---
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/applet/uno.config.ts b/packages/applet/uno.config.ts
index cd8e3330..f2ab0efe 100644
--- a/packages/applet/uno.config.ts
+++ b/packages/applet/uno.config.ts
@@ -38,8 +38,8 @@ export default defineConfig(mergeConfigs([unoConfig, {
   ],
   shortcuts: [{
     // general
-    'bg-base': 'bg-white dark:bg-black',
-    'text-base': 'text-black dark:text-white',
+    'bg-base': 'bg-white dark:bg-#212427',
+    'text-base': 'text-black dark:text-#dfe0e2',
     'bg-active': 'bg-gray:5',
     'border-base': 'border-gray/20',
     'transition-base': 'transition-all duration-200',
diff --git a/packages/client/uno.config.ts b/packages/client/uno.config.ts
index 707d6d01..d9201ec3 100644
--- a/packages/client/uno.config.ts
+++ b/packages/client/uno.config.ts
@@ -51,8 +51,8 @@ export default defineConfig(mergeConfigs([unoConfig, {
   ],
   shortcuts: [{
     // general
-    'bg-base': 'bg-white dark:bg-[#121212]',
-    'text-base': 'text-black dark:text-white',
+    'bg-base': 'bg-white dark:bg-#212427',
+    'text-base': 'text-black dark:text-#dfe0e2',
     'bg-active': 'bg-gray:5',
     'border-base': 'border-gray/20',
     'navbar-base': 'border-b border-base h-50px',
diff --git a/packages/ui/theme/uno.config.ts b/packages/ui/theme/uno.config.ts
index 1fba610e..f69faf61 100644
--- a/packages/ui/theme/uno.config.ts
+++ b/packages/ui/theme/uno.config.ts
@@ -44,14 +44,14 @@ export const unoConfig = {
     '$ui-z-max-override': 'z-2147483647',
 
     // general
-    '$ui-bg-base': 'bg-white dark:bg-black',
+    '$ui-bg-base': 'bg-white dark:bg-#212427',
     '$ui-base': 'box-border font-inherit',
     '$ui-transition': 'transition-all duration-300 ease-in-out',
     '$ui-borderless': '!border-transparent !shadow-none',
     '$ui-base-br': 'rounded-3px',
     '$ui-border-base': 'border-gray/20',
-    '$ui-text': 'text-black dark:text-white',
-    '$ui-glass-effect': 'backdrop-blur-6 bg-white/80 dark:bg-black/90',
+    '$ui-text': 'text-black dark:text-#dfe0e2',
+    '$ui-glass-effect': 'backdrop-blur-6 bg-white/80 dark:bg-#3C3C3C/90',
   },
   rules: [
     ['$ui-font-inherit', { 'font-family': 'inherit' }],

From 43c8c8e01ab6f70ebee230de585429e0ff7e7131 Mon Sep 17 00:00:00 2001
From: Alex <alexzhang1030@foxmail.com>
Date: Tue, 5 Nov 2024 22:57:03 +0800
Subject: [PATCH 2/7] chore: update overlay bg color for dark mode

---
 packages/overlay/src/App.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/overlay/src/App.vue b/packages/overlay/src/App.vue
index 9986c29a..3ad49931 100644
--- a/packages/overlay/src/App.vue
+++ b/packages/overlay/src/App.vue
@@ -22,7 +22,7 @@ const panelState = ref<{
 const cssVars = computed(() => {
   const dark = mode.value === 'dark'
   return {
-    '--vue-devtools-widget-bg': dark ? '#111' : '#ffffff',
+    '--vue-devtools-widget-bg': dark ? '#212427' : '#ffffff',
     '--vue-devtools-widget-fg': dark ? '#F5F5F5' : '#111',
     '--vue-devtools-widget-border': dark ? '#3336' : '#efefef',
     '--vue-devtools-widget-shadow': dark ? 'rgba(0,0,0,0.3)' : 'rgba(128,128,128,0.1)',

From b59ec33f1bbcc7acfa4bc60f7abb8cc53d87089b Mon Sep 17 00:00:00 2001
From: Alex <alexzhang1030@foxmail.com>
Date: Wed, 6 Nov 2024 00:58:49 +0800
Subject: [PATCH 3/7] chore: update more color

---
 .../src/components/state/RootStateViewer.vue    |  2 +-
 .../src/components/state/StateFieldViewer.vue   | 17 ++++++++++++++---
 .../applet/src/components/tree/TreeViewer.vue   |  2 +-
 .../components/components/RenderCode.vue        |  2 +-
 .../applet/src/modules/components/index.vue     |  2 +-
 packages/applet/uno.config.ts                   |  2 +-
 packages/client/src/assets/styles/main.css      |  2 +-
 packages/client/uno.config.ts                   |  4 ++--
 packages/ui/src/components/CodeBlock.vue        |  4 ++++
 packages/ui/src/composables/shiki.ts            |  4 ++++
 10 files changed, 30 insertions(+), 11 deletions(-)

diff --git a/packages/applet/src/components/state/RootStateViewer.vue b/packages/applet/src/components/state/RootStateViewer.vue
index b815a7c1..4ec24fd0 100644
--- a/packages/applet/src/components/state/RootStateViewer.vue
+++ b/packages/applet/src/components/state/RootStateViewer.vue
@@ -50,7 +50,7 @@ const { expanded, toggleExpanded } = useToggleExpanded(props.expandedStateId)
         />
         <!-- placeholder -->
         <span v-else pl5 />
-        <span font-state-field text-3.5>
+        <span font-state-field text-3.5 text-hex-a3a3a3>
           {{ key }}
         </span>
       </div>
diff --git a/packages/applet/src/components/state/StateFieldViewer.vue b/packages/applet/src/components/state/StateFieldViewer.vue
index a06d87c7..d6f20019 100644
--- a/packages/applet/src/components/state/StateFieldViewer.vue
+++ b/packages/applet/src/components/state/StateFieldViewer.vue
@@ -38,7 +38,7 @@ const stateFormatClass = computed(() => {
   if (type.value === 'custom')
     return `${(props.data.value as InspectorCustomState)._custom?.type ?? 'string'}-custom-state`
   else
-    return ``
+    return 'unknown-state-type'
 })
 
 const fieldsCount = computed(() => {
@@ -199,12 +199,12 @@ async function submitDrafting() {
       />
       <!-- placeholder -->
       <span v-else pl5 />
-      <span op70 class="whitespace-nowrap">
+      <span whitespace-nowrap text-purple-700 op70 dark:text-purple-300>
         {{ normalizedDisplayedKey }}
       </span>
       <span mx1>:</span>
       <StateFieldInputEditor v-if="editing" v-model="editingText" class="mr-1" :custom-type="raw.customType" @cancel="toggleEditing" @submit="submit" />
-      <span :class="stateFormatClass" class="flex whitespace-nowrap">
+      <span :class="stateFormatClass" class="flex whitespace-nowrap dark:text-#bdc6cf">
         <span class="flex" v-html="normalizedDisplayedValue" />
       </span>
       <StateFieldEditor
@@ -231,6 +231,17 @@ async function submitDrafting() {
   </div>
 </template>
 
+<style lang="scss">
+// Maybe related https://github.com/vuejs/core/issues/12241
+// Let's leave it global for now, until it's fixed
+// This will compiled to `.dark[v-xxx] selectors` if using scoped
+.function-custom-state {
+  & > span {
+    --at-apply: 'dark:text-#997fff!';
+  }
+}
+</style>
+
 <style lang="scss" scoped>
 // string
 :deep(.string-custom-state) {
diff --git a/packages/applet/src/components/tree/TreeViewer.vue b/packages/applet/src/components/tree/TreeViewer.vue
index 8da159b3..667a590d 100644
--- a/packages/applet/src/components/tree/TreeViewer.vue
+++ b/packages/applet/src/components/tree/TreeViewer.vue
@@ -57,7 +57,7 @@ function select(id: string) {
       <span v-else pl5 />
       <span font-state-field text-3.5>
         <span v-if="withTag" class="text-gray-400 dark:text-gray-600 group-hover:(text-white op50) [.active_&]:(op50 text-white!)">&lt;</span>
-        <span group-hover:text-white class="ws-nowrap [.active_&]:(text-white)">{{ normalizeLabel(item) }}</span>
+        <span class="ws-nowrap text-green-500 dark:text-green-600 group-hover:text-white [.active_&]:text-white!">{{ normalizeLabel(item) }}</span>
         <!-- @vue-expect-error skip type check -->
         <span
           v-if="(item.renderKey === 0 || !!item.renderKey) && item.renderKey !== UNDEFINED"
diff --git a/packages/applet/src/modules/components/components/RenderCode.vue b/packages/applet/src/modules/components/components/RenderCode.vue
index e3eaae68..ffde3a93 100644
--- a/packages/applet/src/modules/components/components/RenderCode.vue
+++ b/packages/applet/src/modules/components/components/RenderCode.vue
@@ -13,7 +13,7 @@ function close() {
 </script>
 
 <template>
-  <div class="absolute left-0 top-0 h-full w-full flex flex-col rounded-br-2.5 rounded-tr-2.5 bg-white p2 dark:bg-[#121212]">
+  <div class="absolute left-0 top-0 h-full w-full flex flex-col rounded-br-2.5 rounded-tr-2.5 bg-white p2 dark:bg-#212427">
     <div class="h-12 w-full flex items-center justify-between p-2">
       <span class="font-500">Render Code</span>
       <i class="i-carbon-close cursor-pointer hover:op80" @click="close" />
diff --git a/packages/applet/src/modules/components/index.vue b/packages/applet/src/modules/components/index.vue
index 86554030..41215fa3 100644
--- a/packages/applet/src/modules/components/index.vue
+++ b/packages/applet/src/modules/components/index.vue
@@ -342,7 +342,7 @@ function toggleApp(id: string) {
             <!-- component name -->
             <span v-if="activeTreeNode?.name" class="font-state-field flex items-center px-1 text-3.5">
               <span class="text-gray-400 dark:text-gray-600">&lt;</span>
-              <span group-hover:text-white class="max-w-40 of-hidden text-ellipsis ws-nowrap [.active_&]:(text-white)">{{ activeTreeNode.name }}</span>
+              <span group-hover:text-white class="max-w-40 of-hidden text-ellipsis ws-nowrap text-green-500 dark:text-green-600 [.active_&]:(text-white!)">{{ activeTreeNode.name }}</span>
               <span class="text-gray-400 dark:text-gray-600">&gt;</span>
             </span>
 
diff --git a/packages/applet/uno.config.ts b/packages/applet/uno.config.ts
index f2ab0efe..e5778af7 100644
--- a/packages/applet/uno.config.ts
+++ b/packages/applet/uno.config.ts
@@ -47,7 +47,7 @@ export default defineConfig(mergeConfigs([unoConfig, {
     // selective list
     'selectable-item': 'flex items-center px-2 py-1 rounded cursor-pointer hover:bg-primary-200 dark:(hover:bg-gray-800) @active:(text-white bg-primary-600 hover:(text-white bg-primary-600))',
 
-    'code-block': 'dark:bg-[#121212] bg-white',
+    'code-block': 'dark:bg-#212427 bg-white',
 
     // state
     'string-state-type': 'text-#e74c3c dark:(text-#c41a16)',
diff --git a/packages/client/src/assets/styles/main.css b/packages/client/src/assets/styles/main.css
index 3f023ee0..24de64ac 100644
--- a/packages/client/src/assets/styles/main.css
+++ b/packages/client/src/assets/styles/main.css
@@ -68,7 +68,7 @@ body::-webkit-scrollbar {
 .v-popper--theme-tooltip .v-popper__arrow-inner,
 .v-popper--theme-dropdown .v-popper__arrow-inner {
   visibility: visible;
-  --uno: 'border-white dark:border-hex-121212';
+  --uno: 'border-white dark:border-#212427';
 }
 
 .v-popper--theme-tooltip .v-popper__arrow-outer,
diff --git a/packages/client/uno.config.ts b/packages/client/uno.config.ts
index d9201ec3..2bb21e70 100644
--- a/packages/client/uno.config.ts
+++ b/packages/client/uno.config.ts
@@ -61,11 +61,11 @@ export default defineConfig(mergeConfigs([unoConfig, {
     'x-divider': 'h-1px w-full bg-gray/15',
 
     // glass
-    'glass-effect': 'backdrop-blur-6 bg-white/80 dark:bg-[#121212]/90',
+    'glass-effect': 'backdrop-blur-6 bg-white/80 dark:bg-#212427/90',
     'navbar-glass': 'sticky z-10 top-0 glass-effect',
 
     // code
-    'code-block': 'dark:bg-[#121212] bg-white',
+    'code-block': 'dark:bg-#212427 bg-white',
 
     // panel grids
     'panel-grids': 'panel-grids-light dark:panel-grids-dark',
diff --git a/packages/ui/src/components/CodeBlock.vue b/packages/ui/src/components/CodeBlock.vue
index 8910ccc5..21bb917a 100644
--- a/packages/ui/src/components/CodeBlock.vue
+++ b/packages/ui/src/components/CodeBlock.vue
@@ -68,6 +68,10 @@ const rendered = computed(() => {
         }
       }
     }
+    span {
+      --at-apply: '$ui-bg-base!';
+    }
+    --at-apply: '$ui-bg-base!';
   }
   pre {
     &:focus-visible {
diff --git a/packages/ui/src/composables/shiki.ts b/packages/ui/src/composables/shiki.ts
index 18e037c2..06014ab4 100644
--- a/packages/ui/src/composables/shiki.ts
+++ b/packages/ui/src/composables/shiki.ts
@@ -48,6 +48,10 @@ export function renderCodeHighlight(code: string, lang: BuiltinLanguage | 'text'
         dark: 'vitesse-dark',
         light: 'vitesse-light',
       },
+      colorReplacements: {
+        // vitesse-dark bg color
+        '#121212': 'transparent',
+      },
     }),
     supported: true,
   }

From 5da19624a4abf809325b44c7c0fdfac8c8c2d3ff Mon Sep 17 00:00:00 2001
From: Alex <alexzhang1030@foxmail.com>
Date: Wed, 6 Nov 2024 01:08:03 +0800
Subject: [PATCH 4/7] chore: update more colors

---
 packages/client/uno.config.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/client/uno.config.ts b/packages/client/uno.config.ts
index 2bb21e70..181e879a 100644
--- a/packages/client/uno.config.ts
+++ b/packages/client/uno.config.ts
@@ -15,7 +15,7 @@ export default defineConfig(mergeConfigs([unoConfig, {
       'background-size': '40px 40px',
     }],
     ['panel-grids-dark', {
-      'background-image': `url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' transform='scale(3)'%3E%3Crect x='0' y='0' width='100%25' height='100%25' fill='${encodeURIComponent('#121212')}'/%3E%3Cpath d='M 10,-2.55e-7 V 20 Z M -1.1677362e-8,10 H 20 Z' stroke-width='0.2' stroke='${encodeURIComponent('#121212')}' fill='none'/%3E%3C/svg%3E");`,
+      'background-image': `url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' transform='scale(3)'%3E%3Crect x='0' y='0' width='100%25' height='100%25' fill='${encodeURIComponent('#212427')}'/%3E%3Cpath d='M 10,-2.55e-7 V 20 Z M -1.1677362e-8,10 H 20 Z' stroke-width='0.2' stroke='${encodeURIComponent('#212427')}' fill='none'/%3E%3C/svg%3E");`,
       'background-size': '40px 40px',
     }],
   ],

From 06695dabf703a39a1f15621d985e6bc6e60e868c Mon Sep 17 00:00:00 2001
From: Alex <alexzhang1030@foxmail.com>
Date: Wed, 6 Nov 2024 22:33:26 +0800
Subject: [PATCH 5/7] chore: update state value color

---
 packages/applet/uno.config.ts | 2 +-
 packages/client/uno.config.ts | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/applet/uno.config.ts b/packages/applet/uno.config.ts
index e5778af7..33d7c0b9 100644
--- a/packages/applet/uno.config.ts
+++ b/packages/applet/uno.config.ts
@@ -50,7 +50,7 @@ export default defineConfig(mergeConfigs([unoConfig, {
     'code-block': 'dark:bg-#212427 bg-white',
 
     // state
-    'string-state-type': 'text-#e74c3c dark:(text-#c41a16)',
+    'string-state-type': 'text-#e74c3c dark:(text-#FFB980)',
     'literal-state-type': 'text-#03c dark:(text-#997fff)',
     'boolean-state-type': 'text-#27ae60 dark:(text-#abebc6)',
     'null-state-type': 'text-#999',
diff --git a/packages/client/uno.config.ts b/packages/client/uno.config.ts
index 181e879a..b4ccc11e 100644
--- a/packages/client/uno.config.ts
+++ b/packages/client/uno.config.ts
@@ -80,7 +80,7 @@ export default defineConfig(mergeConfigs([unoConfig, {
     'state-value': 'text-#444 dark:(text-#bdc6cf)',
     'state-value-label': 'text-gray-500',
     'state-value-literal': 'text-#03c dark:(text-#997fff)',
-    'state-value-string': 'text-#c41a16',
+    'state-value-string': 'text-#FFB980',
   }, [/^theme-card-(\w+)$/, $ => `p2 flex gap2 border border-base bg-base items-center rounded min-w-40 min-h-25 justify-center transition-all saturate-0 op50 shadow hover:(op100 bg-${$[1]}/10 text-${$[1]}6 saturate-100)`]],
   presets: [
     presetAttributify(),

From e091cc7cdc77e54fc1ae223920ed14329f6d372a Mon Sep 17 00:00:00 2001
From: Alex <alexzhang1030@foxmail.com>
Date: Mon, 11 Nov 2024 20:03:39 +0800
Subject: [PATCH 6/7] chore: revert bg changes

---
 .../src/modules/components/components/RenderCode.vue      | 2 +-
 packages/applet/uno.config.ts                             | 4 ++--
 packages/client/src/assets/styles/main.css                | 2 +-
 packages/client/uno.config.ts                             | 8 ++++----
 packages/devtools-kit/src/core/component/state/custom.ts  | 2 +-
 packages/overlay/src/App.vue                              | 2 +-
 packages/ui/src/composables/shiki.ts                      | 4 ----
 packages/ui/theme/uno.config.ts                           | 2 +-
 8 files changed, 11 insertions(+), 15 deletions(-)

diff --git a/packages/applet/src/modules/components/components/RenderCode.vue b/packages/applet/src/modules/components/components/RenderCode.vue
index ffde3a93..87972265 100644
--- a/packages/applet/src/modules/components/components/RenderCode.vue
+++ b/packages/applet/src/modules/components/components/RenderCode.vue
@@ -13,7 +13,7 @@ function close() {
 </script>
 
 <template>
-  <div class="absolute left-0 top-0 h-full w-full flex flex-col rounded-br-2.5 rounded-tr-2.5 bg-white p2 dark:bg-#212427">
+  <div class="absolute left-0 top-0 h-full w-full flex flex-col rounded-br-2.5 rounded-tr-2.5 bg-white p2 dark:bg-#121212">
     <div class="h-12 w-full flex items-center justify-between p-2">
       <span class="font-500">Render Code</span>
       <i class="i-carbon-close cursor-pointer hover:op80" @click="close" />
diff --git a/packages/applet/uno.config.ts b/packages/applet/uno.config.ts
index 33d7c0b9..c67981e7 100644
--- a/packages/applet/uno.config.ts
+++ b/packages/applet/uno.config.ts
@@ -38,7 +38,7 @@ export default defineConfig(mergeConfigs([unoConfig, {
   ],
   shortcuts: [{
     // general
-    'bg-base': 'bg-white dark:bg-#212427',
+    'bg-base': 'bg-white dark:bg-#121212',
     'text-base': 'text-black dark:text-#dfe0e2',
     'bg-active': 'bg-gray:5',
     'border-base': 'border-gray/20',
@@ -47,7 +47,7 @@ export default defineConfig(mergeConfigs([unoConfig, {
     // selective list
     'selectable-item': 'flex items-center px-2 py-1 rounded cursor-pointer hover:bg-primary-200 dark:(hover:bg-gray-800) @active:(text-white bg-primary-600 hover:(text-white bg-primary-600))',
 
-    'code-block': 'dark:bg-#212427 bg-white',
+    'code-block': 'dark:bg-#121212 bg-white',
 
     // state
     'string-state-type': 'text-#e74c3c dark:(text-#FFB980)',
diff --git a/packages/client/src/assets/styles/main.css b/packages/client/src/assets/styles/main.css
index 24de64ac..a06db91b 100644
--- a/packages/client/src/assets/styles/main.css
+++ b/packages/client/src/assets/styles/main.css
@@ -68,7 +68,7 @@ body::-webkit-scrollbar {
 .v-popper--theme-tooltip .v-popper__arrow-inner,
 .v-popper--theme-dropdown .v-popper__arrow-inner {
   visibility: visible;
-  --uno: 'border-white dark:border-#212427';
+  --uno: 'border-white dark:border-#121212';
 }
 
 .v-popper--theme-tooltip .v-popper__arrow-outer,
diff --git a/packages/client/uno.config.ts b/packages/client/uno.config.ts
index b4ccc11e..318b7c5c 100644
--- a/packages/client/uno.config.ts
+++ b/packages/client/uno.config.ts
@@ -15,7 +15,7 @@ export default defineConfig(mergeConfigs([unoConfig, {
       'background-size': '40px 40px',
     }],
     ['panel-grids-dark', {
-      'background-image': `url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' transform='scale(3)'%3E%3Crect x='0' y='0' width='100%25' height='100%25' fill='${encodeURIComponent('#212427')}'/%3E%3Cpath d='M 10,-2.55e-7 V 20 Z M -1.1677362e-8,10 H 20 Z' stroke-width='0.2' stroke='${encodeURIComponent('#212427')}' fill='none'/%3E%3C/svg%3E");`,
+      'background-image': `url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' transform='scale(3)'%3E%3Crect x='0' y='0' width='100%25' height='100%25' fill='${encodeURIComponent('#121212')}'/%3E%3Cpath d='M 10,-2.55e-7 V 20 Z M -1.1677362e-8,10 H 20 Z' stroke-width='0.2' stroke='${encodeURIComponent('#121212')}' fill='none'/%3E%3C/svg%3E");`,
       'background-size': '40px 40px',
     }],
   ],
@@ -51,7 +51,7 @@ export default defineConfig(mergeConfigs([unoConfig, {
   ],
   shortcuts: [{
     // general
-    'bg-base': 'bg-white dark:bg-#212427',
+    'bg-base': 'bg-white dark:bg-#121212',
     'text-base': 'text-black dark:text-#dfe0e2',
     'bg-active': 'bg-gray:5',
     'border-base': 'border-gray/20',
@@ -61,11 +61,11 @@ export default defineConfig(mergeConfigs([unoConfig, {
     'x-divider': 'h-1px w-full bg-gray/15',
 
     // glass
-    'glass-effect': 'backdrop-blur-6 bg-white/80 dark:bg-#212427/90',
+    'glass-effect': 'backdrop-blur-6 bg-white/80 dark:bg-#121212/90',
     'navbar-glass': 'sticky z-10 top-0 glass-effect',
 
     // code
-    'code-block': 'dark:bg-#212427 bg-white',
+    'code-block': 'dark:bg-#121212 bg-white',
 
     // panel grids
     'panel-grids': 'panel-grids-light dark:panel-grids-dark',
diff --git a/packages/devtools-kit/src/core/component/state/custom.ts b/packages/devtools-kit/src/core/component/state/custom.ts
index 29d9cee9..8ec165ea 100644
--- a/packages/devtools-kit/src/core/component/state/custom.ts
+++ b/packages/devtools-kit/src/core/component/state/custom.ts
@@ -22,7 +22,7 @@ export function getFunctionDetails(func: Function) {
   return {
     _custom: {
       type: 'function' satisfies customTypeEnums,
-      displayText: `<span style="opacity:.5;margin-right:5px;">function</span> <span style="white-space:nowrap;">${escape(name)}${args}</span>`,
+      displayText: `<span style="opacity:.8;margin-right:5px;">function</span> <span style="white-space:nowrap;">${escape(name)}${args}</span>`,
       tooltipText: string.trim() ? `<pre>${string}</pre>` : null,
     },
   }
diff --git a/packages/overlay/src/App.vue b/packages/overlay/src/App.vue
index 3ad49931..35697b7e 100644
--- a/packages/overlay/src/App.vue
+++ b/packages/overlay/src/App.vue
@@ -22,7 +22,7 @@ const panelState = ref<{
 const cssVars = computed(() => {
   const dark = mode.value === 'dark'
   return {
-    '--vue-devtools-widget-bg': dark ? '#212427' : '#ffffff',
+    '--vue-devtools-widget-bg': dark ? '#121212' : '#ffffff',
     '--vue-devtools-widget-fg': dark ? '#F5F5F5' : '#111',
     '--vue-devtools-widget-border': dark ? '#3336' : '#efefef',
     '--vue-devtools-widget-shadow': dark ? 'rgba(0,0,0,0.3)' : 'rgba(128,128,128,0.1)',
diff --git a/packages/ui/src/composables/shiki.ts b/packages/ui/src/composables/shiki.ts
index 06014ab4..18e037c2 100644
--- a/packages/ui/src/composables/shiki.ts
+++ b/packages/ui/src/composables/shiki.ts
@@ -48,10 +48,6 @@ export function renderCodeHighlight(code: string, lang: BuiltinLanguage | 'text'
         dark: 'vitesse-dark',
         light: 'vitesse-light',
       },
-      colorReplacements: {
-        // vitesse-dark bg color
-        '#121212': 'transparent',
-      },
     }),
     supported: true,
   }
diff --git a/packages/ui/theme/uno.config.ts b/packages/ui/theme/uno.config.ts
index f69faf61..80fee22a 100644
--- a/packages/ui/theme/uno.config.ts
+++ b/packages/ui/theme/uno.config.ts
@@ -44,7 +44,7 @@ export const unoConfig = {
     '$ui-z-max-override': 'z-2147483647',
 
     // general
-    '$ui-bg-base': 'bg-white dark:bg-#212427',
+    '$ui-bg-base': 'bg-white dark:bg-#121212',
     '$ui-base': 'box-border font-inherit',
     '$ui-transition': 'transition-all duration-300 ease-in-out',
     '$ui-borderless': '!border-transparent !shadow-none',

From 70baa9b7d830337d2c0db010909cd1dc046ee889 Mon Sep 17 00:00:00 2001
From: arlo <webfansplz@gmail.com>
Date: Mon, 11 Nov 2024 22:25:44 +0800
Subject: [PATCH 7/7] chore: update

---
 packages/applet/src/components/tree/TreeViewer.vue | 2 +-
 packages/applet/src/modules/components/index.vue   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/applet/src/components/tree/TreeViewer.vue b/packages/applet/src/components/tree/TreeViewer.vue
index 667a590d..8da159b3 100644
--- a/packages/applet/src/components/tree/TreeViewer.vue
+++ b/packages/applet/src/components/tree/TreeViewer.vue
@@ -57,7 +57,7 @@ function select(id: string) {
       <span v-else pl5 />
       <span font-state-field text-3.5>
         <span v-if="withTag" class="text-gray-400 dark:text-gray-600 group-hover:(text-white op50) [.active_&]:(op50 text-white!)">&lt;</span>
-        <span class="ws-nowrap text-green-500 dark:text-green-600 group-hover:text-white [.active_&]:text-white!">{{ normalizeLabel(item) }}</span>
+        <span group-hover:text-white class="ws-nowrap [.active_&]:(text-white)">{{ normalizeLabel(item) }}</span>
         <!-- @vue-expect-error skip type check -->
         <span
           v-if="(item.renderKey === 0 || !!item.renderKey) && item.renderKey !== UNDEFINED"
diff --git a/packages/applet/src/modules/components/index.vue b/packages/applet/src/modules/components/index.vue
index 41215fa3..86554030 100644
--- a/packages/applet/src/modules/components/index.vue
+++ b/packages/applet/src/modules/components/index.vue
@@ -342,7 +342,7 @@ function toggleApp(id: string) {
             <!-- component name -->
             <span v-if="activeTreeNode?.name" class="font-state-field flex items-center px-1 text-3.5">
               <span class="text-gray-400 dark:text-gray-600">&lt;</span>
-              <span group-hover:text-white class="max-w-40 of-hidden text-ellipsis ws-nowrap text-green-500 dark:text-green-600 [.active_&]:(text-white!)">{{ activeTreeNode.name }}</span>
+              <span group-hover:text-white class="max-w-40 of-hidden text-ellipsis ws-nowrap [.active_&]:(text-white)">{{ activeTreeNode.name }}</span>
               <span class="text-gray-400 dark:text-gray-600">&gt;</span>
             </span>