From f06fbafc1e709c7b4e54e2ba40d44c5770685a5d Mon Sep 17 00:00:00 2001
From: Romain Hamel <rom.hml@gmail.com>
Date: Thu, 28 Nov 2024 10:51:55 +0100
Subject: [PATCH] fix(devtools): error with renderer when `colorMode` is
 disabled (#2792)

---
 src/devtools/runtime/DevtoolsRenderer.vue | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/devtools/runtime/DevtoolsRenderer.vue b/src/devtools/runtime/DevtoolsRenderer.vue
index 9efe97b0..719a840b 100644
--- a/src/devtools/runtime/DevtoolsRenderer.vue
+++ b/src/devtools/runtime/DevtoolsRenderer.vue
@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import { onUnmounted, onMounted, reactive } from 'vue'
 import { pascalCase } from 'scule'
-import { defineAsyncComponent, useColorMode, useRoute } from '#imports'
+import { defineAsyncComponent, useRoute } from '#imports'
+import { useColorMode } from '@vueuse/core'
 
 const route = useRoute()
 const component = route.query?.example
@@ -15,9 +16,9 @@ function onUpdateRenderer(event: Event & { data?: any }) {
   state.slots = { ...event.data.slots }
 }
 
-const colorMode = useColorMode()
+const mode = useColorMode()
 function setColorMode(event: Event & { isDark?: boolean }) {
-  colorMode.preference = event.isDark ? 'dark' : 'light'
+  mode.value = event.isDark ? 'dark' : 'light'
 }
 
 onMounted(() => {