feat: refine bg/text color for dark mode (#686)

Co-authored-by: arlo <webfansplz@gmail.com>

Author: alexzhang1030

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>

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) {

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-#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" />

packages/applet/uno.config.ts

@@ -38,19 +38,19 @@ 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-#121212',
+    'text-base': 'text-black dark:text-#dfe0e2',
     'bg-active': 'bg-gray:5',
     'border-base': 'border-gray/20',
     'transition-base': 'transition-all duration-200',
 
     // 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-#121212 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',

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-#121212';
 }
 
 .v-popper--theme-tooltip .v-popper__arrow-outer,

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-#121212',
+    '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',
@@ -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-#121212/90',
     'navbar-glass': 'sticky z-10 top-0 glass-effect',
 
     // code
-    'code-block': 'dark:bg-[#121212] bg-white',
+    'code-block': 'dark:bg-#121212 bg-white',
 
     // panel grids
     'panel-grids': 'panel-grids-light dark:panel-grids-dark',
@@ -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(),

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,
     },
   }

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 ? '#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)',

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 {

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-#121212',
     '$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' }],