useColorMode not reactive when using multiple instances

When I use useColorMode() in different places, different refs are returned, which means reactivity between them doesn’t work, e.g.

// ColorMode toggle component

<template>
  Some color mode toggle
</tempalte>

<script setup lang="ts">
const color = useColorMode()
// manipulate color with toggle...
</script>

// Some other component

<template>
  <div :style="{ 'background-color': bgColor }">
    Some HTML
  </div>
</tempalte>

<script setup lang="ts">
const color = useColorMode()
const bgColor = computed(() => color === 'light' ? '#fff' : '#000')
</script>

Now, when I use the toggle to change the color, the second component will not react…

[okxiaoliang4]

It throws an error, see updated example: https://stackblitz.com/edit/nuxt3-vueuse-color-mode-reactivity-bug

Try it , https://stackblitz.com/edit/nuxt3-vueuse-color-mode-reactivity-bug-gfrbbx?file=composables%2FuseTheme.ts

Hi I’m back. I think it’s a bit complicated. see this https://stackblitz.com/edit/vitejs-vite-dfuy95?file=src%2Fuse%2FuseGlobalColorMode.ts&terminal=dev

I update the demo with createGlobalState

[okxiaoliang4]

I think if you want reactive colorMode in multiple instance it would be a little better to export its module (less function call) or try createGlobalState.