Why does this simple color mode switcher component, which worked in 3.5, not work after upgrading to 3.11?

[majordomo-admin]

Seems like a very straightforward component, not sure why it is no longer working:

<template>
  <button
    class="pl-1 focus:outline-none focus:shadow-outline"
    @click="toggleColorMode"
  >
    <Icon 
      :name="iconName" 
      size="1.5em" 
      color="currentColor">
    </Icon>
  </button>
</template>

<script setup>
const colorMode = useColorMode()

const iconName = computed(() => {
  return colorMode.preference === 'dark' ? 'ph:sun-bold' : 'tabler:moon'
})

const toggleColorMode = () => {
  colorMode.preference = colorMode.preference === 'dark' ? 'light' : 'dark'
}
</script>

<style>
body {
  background-color: #f1f2ee;
  color: #555555;
}

a {
  color: #555555;
}

a:hover {
  color: #555555;
}

.light-mode html {
  background-color: #f1f2ee;
  color: #555555;
}

.dark-mode html  {
  background-color: #091a28;
  color: #ebf4f1;
}
</style>