#Button to change color-mode not working

9 messages · Page 1 of 1 (latest)

turbid lotus
#

Here is my code:

<script setup lang="ts">
// import DropDown from "./DropDown.vue";
const colorMode = useColorMode()
function changeColorMode() {
    const curColorMode = colorMode.value;
    console.log(curColorMode);
    if (curColorMode === 'system') colorMode.preference = 'light';
    else if (curColorMode === 'light') colorMode.preference = 'dark';
    else if (curColorMode === 'dark') colorMode.preference = 'system';
}
</script>

<template>
 <button @click="changeColorMode" class="flex justify-center items-center text-gray-700 duration-200 transition-all rounded-lg hover:bg-slate-100 group w-12 h-12 text-4xl ">
    <Icon class="group-hover:rotate-12" v-if="$colorMode.value === 'system'" name="tabler:color-swatch"/>
    <Icon class="group-hover:rotate-12" v-else-if="$colorMode.value === 'light'" name="material-symbols-light:sunny-rounded"/>
    <Icon class="group-hover:rotate-12" v-else-if="$colorMode.value === 'dark'" name="material-symbols-light:dark-mode-rounded"/>
    </button>
</template>

The color mode doesn't change at all, it keeps to dark all the time

near deltaBOT
#

Hi @turbid lotus. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

Your approach to toggling the color mode is close, but there are a few issues:

  1. You should update colorMode.preference directly based on the current value, not set it to 'light' first.
  2. You should use colorMode.value for both reading and updating.
  3. The $colorMode property in the template is not standard; you should use the colorMode variable you defined in your script.

Here’s a corrected version based on the official Nuxt UI and Nuxt Color Mode integration:

<script setup lang="ts">
const colorMode = useColorMode()

function changeColorMode() {
  if (colorMode.value === 'system') {
    colorMode.preference = 'light'
  } else if (colorMode.value === 'light') {
    colorMode.preference = 'dark'
  } else if (colorMode.value === 'dark') {
    colorMode.preference = 'system'
  }
}
</script>

<template>
  <button
    @click="changeColorMode"
    class="flex justify-center items-center text-gray-700 duration-200 transition-all rounded-lg hover:bg-slate-100 group w-12 h-12 text-4xl"
  >
    <Icon class="group-hover:rotate-12" v-if="colorMode.value === 'system'" name="tabler:color-swatch" />
    <Icon class="group-hover:rotate-12" v-else-if="colorMode.value === 'light'" name="material-symbols-light:sunny-rounded" />
    <Icon class="group-hover:rotate-12" v-else-if="colorMode.value === 'dark'" name="material-symbols-light:dark-mode-rounded" />
  </button>
</template>

Key points:

  • Use colorMode.value in both your script and template.
  • Do not use $colorMode in the template unless you have explicitly provided it as a global property (which is not standard in Nuxt 3).
  • The logic for cycling through the modes should not set 'light' by default before checking the current value.
#

This approach matches the recommended usage for color mode switching in Nuxt UI and Nuxt Color Mode integrations Nuxt UI Color Mode Usage.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@turbid lotus Kapa.ai is still learning and improving, please let me know how I did by reacting below.

vivid kettle
#

what does curColorMode log?

opal quiver
#

I haven't used color-mode, but shouldn't you be changing .value instead of .preference?

#

@turbid lotus

#

nvm