Dark mode switcher in Nuxt 3 not working with official @nuxtjs/color-mode

I wanted to implement dark mode on my Nuxt app using tailwind and the recommended @nuxtjs/color-mdoe module. Testing tailwind’s dark: classes went fine and worked as expected, however I can’t make a button switcher work to set the color mode programmatically.

I installed in devDeps the module in version 3.2.0, which should be compatible with Nuxt 3, according to the docs

"@nuxtjs/color-mode": "^3.2.0"

And applied the proper configuration in nuxt.config.ts

modules: [ '@nuxtjs/color-mode' ],
colorMode: {
    classSuffix: '',
    preference: 'system',
    fallback: 'dark'
  }

Since I wanted to place the switch in the header here’s what I did in the component:

<template>
  <header class="contain py-[15px] flex items-center justify-between backdrop-blur-3xl">
    <button @click="toggleDarkMode($colorMode.preference === 'dark' ? 'light' : 'dark')">
      <nuxt-icon v-if="$colorMode.preference === 'dark'" name="sun"/>
      <nuxt-icon v-else name="moon"/>
    </button>
  </header>
</template>
<script setup>
function toggleDarkMode(theme) {
  useColorMode().preference = theme
}
</script>

The classes are actually toggling when I manually change the color mode from my os (win11) settings, but clicking the button won’t replicate the same behavior. The mode seems to be switching since the icon does change accordingly.

Looking at the docs and tutorials I found elsewhere it should just work like that. Do I needd to set the mode as global state inside the store? Should I call the hook in a root level component?