diff --git a/packages/core/src/client/webcomponents/components/icons/ViteDevTools.vue b/packages/core/src/client/webcomponents/components/icons/ViteDevTools.vue
index 394c3564f..36e4c9c98 100644
--- a/packages/core/src/client/webcomponents/components/icons/ViteDevTools.vue
+++ b/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>
 
diff --git a/packages/oxc/src/app/app.vue b/packages/oxc/src/app/app.vue
index 4a3860e97..fb8830af5 100644
--- a/packages/oxc/src/app/app.vue
+++ b/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>
diff --git a/packages/rolldown/src/app/app.vue b/packages/rolldown/src/app/app.vue
index d744db55c..50e52cdad 100644
--- a/packages/rolldown/src/app/app.vue
+++ b/packages/rolldown/src/app/app.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { applyDarkClassToHtml } from '@vitejs/devtools-ui/composables/dark'
 import { useSeoMeta } from '#app/composables/head'
 
 import { connect, connectionState } from './composables/rpc'
@@ -6,7 +7,8 @@ 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',
diff --git a/packages/ui/src/composables/dark.ts b/packages/ui/src/composables/dark.ts
index 84b31fe9b..e4ec1172a 100644
--- a/packages/ui/src/composables/dark.ts
+++ b/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)
+  })
+}
diff --git a/packages/vite/src/app/app.vue b/packages/vite/src/app/app.vue
index 334c2c2f8..0b6fd62e7 100644
--- a/packages/vite/src/app/app.vue
+++ b/packages/vite/src/app/app.vue
@@ -1,5 +1,6 @@
 <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'
@@ -7,7 +8,8 @@ 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',