Nuxt•5mo ago

Button to change color-mode not working

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>

<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

5 Replies

kapa.ai•5mo ago

Hi @LocTran016. 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>

<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: ----------------------

kapa.ai•5mo ago

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

isakwang•5mo ago

what does curColorMode log?

Cake•5mo ago

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

LocTran016OP•5mo ago

It seem that I remove the 'system' and things work just fine, kinda weird tbh

Gaming

Programming

Button to change color-mode not working

Did you find this page helpful?