fix(ui): prevent dark mode from mutating host document (#480)

Author: SaKaNa-Y

packages/core/src/client/webcomponents/components/icons/ViteDevTools.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
-import { isDark } from '@vitejs/devtools-ui/composables/dark'
+import { usePreferredDark } from '@vueuse/core'
 import { computed } from 'vue'
 
+const isDark = usePreferredDark()
 const theme = computed(() => isDark.value ? 'white' : 'black')
 </script>
 

packages/oxc/src/app/app.vue

@@ -1,8 +1,10 @@
 <script setup lang="ts">
+import { applyDarkClassToHtml } from '@vitejs/devtools-ui/composables/dark'
 import { connect, connectionState } from './composables/rpc'
 import 'floating-vue/dist/style.css'
 import './assets/css/main.css'
-import '@vitejs/devtools-ui/composables/dark'
+
+applyDarkClassToHtml()
 
 connect()
 </script>

packages/rolldown/src/app/app.vue

@@ -1,12 +1,14 @@
 <script setup lang="ts">
+import { applyDarkClassToHtml } from '@vitejs/devtools-ui/composables/dark'
 import { useSeoMeta } from '#app/composables/head'
 
 import { connect, connectionState } from './composables/rpc'
 import 'floating-vue/dist/style.css'
 import './styles/cm.css'
 import './styles/splitpanes.css'
 import './styles/global.css'
-import '@vitejs/devtools-ui/composables/dark'
+
+applyDarkClassToHtml()
 
 useSeoMeta({
   title: 'Rolldown DevTools',

packages/ui/src/composables/dark.ts

@@ -1,10 +1,27 @@
-import { useDark } from '@vueuse/core'
+import type { WritableComputedRef } from 'vue'
+import { usePreferredDark, useStorage } from '@vueuse/core'
+import { computed, watchEffect } from 'vue'
 
-export const isDark = useDark({
-  storageKey: 'vite-devtools-color-scheme',
-  valueLight: 'light',
+export type ColorSchemePreference = 'auto' | 'dark' | 'light'
+
+const preference = useStorage<ColorSchemePreference>('vite-devtools-color-scheme', 'auto')
+const preferredDark = usePreferredDark()
+
+export const isDark: WritableComputedRef<boolean> = computed({
+  get: () => (preference.value === 'auto' ? preferredDark.value : preference.value === 'dark'),
+  set: (value) => { preference.value = value ? 'dark' : 'light' },
 })
 
 export function toggleDark() {
   isDark.value = !isDark.value
 }
+
+export function applyDarkClassToHtml() {
+  if (typeof document === 'undefined')
+    return
+  watchEffect(() => {
+    const el = document.documentElement
+    el.classList.toggle('dark', isDark.value)
+    el.classList.toggle('light', !isDark.value)
+  })
+}

packages/vite/src/app/app.vue

@@ -1,13 +1,15 @@
 <script setup lang="ts">
 import PanelSideNav from '@vitejs/devtools-ui/components/Panel/PanelSideNav.vue'
+import { applyDarkClassToHtml } from '@vitejs/devtools-ui/composables/dark'
 import { useSideNav } from '@vitejs/devtools-ui/composables/nav'
 import { useSeoMeta } from '#app/composables/head'
 import { connect, rpcConnectionState } from './composables/rpc'
 import 'floating-vue/dist/style.css'
 import './styles/cm.css'
 import './styles/splitpanes.css'
 import './styles/global.css'
-import '@vitejs/devtools-ui/composables/dark'
+
+applyDarkClassToHtml()
 
 useSeoMeta({
   title: 'Vite DevTools',