N
Nuxt•3mo ago
0Julian0

Colors not fading when using @nuxtjs/color-mode

Hey, I am trying to implement a dark/light mode system using the @nuxtjs/color-mode package, but for some reason, the background color is not playing a fading animation when switching color. It however, plays the fade when reloading the page, just not when I manually change it. Furthermore, I have pretty much copied the code of the sandbox showcase (where the fade works), so I have no idea what is going on. (Just to clarify, when I switch colors, it does switch the colors, but it does so without fading) app.vue: 
<template>
  <UApp>
    <NuxtPage />
  </UApp>
</template>

<script lang="ts" setup>

</script>


<style>
:root {
  --color: #243746;
  --color-primary: #158876;
  --color-secondary: #0e2233;
  --bg: #f3f5f4;
  --bg-secondary: #fff;
  --border-color: #ddd;
}

.dark {
  --color: #ebf4f1;
  --color-primary: #41b38a;
  --color-secondary: #fdf9f3;
  --bg: #091a28;
  --bg-secondary: #071521;
  --border-color: #0d2538;
}
.sepia {
  --color: #433422;
  --color-secondary: #504231;
  --bg: #f1e7d0;
  --bg-secondary: #eae0c9;
  --border-color: #ded0bf;
}

body {
  background-color: var(--bg);
  color: var(--color);
  transition: background-color .3s;
}
</style>
<template>
  <UApp>
    <NuxtPage />
  </UApp>
</template>

<script lang="ts" setup>

</script>


<style>
:root {
  --color: #243746;
  --color-primary: #158876;
  --color-secondary: #0e2233;
  --bg: #f3f5f4;
  --bg-secondary: #fff;
  --border-color: #ddd;
}

.dark {
  --color: #ebf4f1;
  --color-primary: #41b38a;
  --color-secondary: #fdf9f3;
  --bg: #091a28;
  --bg-secondary: #071521;
  --border-color: #0d2538;
}
.sepia {
  --color: #433422;
  --color-secondary: #504231;
  --bg: #f1e7d0;
  --bg-secondary: #eae0c9;
  --border-color: #ded0bf;
}

body {
  background-color: var(--bg);
  color: var(--color);
  transition: background-color .3s;
}
</style>
nuxt.config.ts: 
export default defineNuxtConfig({
  compatibilityDate: '2025-07-15',
  devtools: { enabled: true },
  modules: ['@nuxt/ui', '@tresjs/nuxt', '@nuxt/fonts', '@nuxtjs/color-mode'],
  colorMode: {
    storage: 'cookie',
  },
  fonts: {
    provider: 'google',
    families: [
      {
        name: 'Bitcount Single Ink'
      }
    ],
    devtools: true
  },
  css: ['@/assets/css/main.css'],
  postcss: {
    plugins: {
      '@tailwindcss/postcss': {},
    },
  },
})
export default defineNuxtConfig({
  compatibilityDate: '2025-07-15',
  devtools: { enabled: true },
  modules: ['@nuxt/ui', '@tresjs/nuxt', '@nuxt/fonts', '@nuxtjs/color-mode'],
  colorMode: {
    storage: 'cookie',
  },
  fonts: {
    provider: 'google',
    families: [
      {
        name: 'Bitcount Single Ink'
      }
    ],
    devtools: true
  },
  css: ['@/assets/css/main.css'],
  postcss: {
    plugins: {
      '@tailwindcss/postcss': {},
    },
  },
})
app/pages/index.vue: 
<template>
<div class="flex flex-col w-full h-full justify-center items-center text-center gap-4">
    <ColorPicker />
</div>
</template>

<script lang="ts" setup>
    
</script>
<template>
<div class="flex flex-col w-full h-full justify-center items-center text-center gap-4">
    <ColorPicker />
</div>
</template>

<script lang="ts" setup>
    
</script>
GitHub
color-mode/playground at main · nuxt-modules/color-mode
Dark and Light mode with auto detection made easy with Nuxt 🌗 - nuxt-modules/color-mode
5 Replies
kapa.ai
kapa.ai•3mo ago
Hi @0Julian0. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- The issue you're experiencing—where the background color does not fade when switching color modes with @nuxtjs/color-mode, but does fade on page reload—is likely due to how CSS transitions interact with class changes on the <body> element. From your code, you have: 
body {
  background-color: var(--bg);
  color: var(--color);
  transition: background-color .3s;
}
body {
  background-color: var(--bg);
  color: var(--color);
  transition: background-color .3s;
}
However, when @nuxtjs/color-mode toggles between modes, it adds or removes classes like .dark or .sepia on the <html> or <body> element. The transition on background-color should work, but sometimes, if the class is toggled on <html> instead of <body>, or if the CSS selector specificity doesn't match, the transition may not trigger as expected. What to check and try: 1. Ensure the transition is on the correct element:
If @nuxtjs/color-mode is toggling the class on <html> (which is the default), your transition should be on html, not body: 
   html {
     background-color: var(--bg);
     color: var(--color);
     transition: background-color .3s;
   }
   
   html {
     background-color: var(--bg);
     color: var(--color);
     transition: background-color .3s;
   }
2. Check for specificity issues:
If both html and body have background-color set, only the more specific one will apply. Make sure only one is setting it, or that your transition is on the element actually being updated. 3. Nuxt UI and color mode integration:
Nuxt UI automatically registers @nuxtjs/color-mode and uses CSS variables for theming. If you use Nuxt UI's design tokens (e.g., --ui-bg), you can leverage their system for smooth transitions and dark mode support. Example from the docs: 
   :root {
     --ui-bg: var(--ui-color-neutral-50);
     --ui-text: var(--ui-color-neutral-900);
   }
   .dark {
     --ui-bg: var(--ui-color-neutral-950);
     --ui-border: var(--ui-color-neutral-900);
   }
   body {
     background-color: var(--ui-bg);
     color: var(--ui-text);
     transition: background-color .3s;
   }
   
   :root {
     --ui-bg: var(--ui-color-neutral-50);
     --ui-text: var(--ui-color-neutral-900);
   }
   .dark {
     --ui-bg: var(--ui-color-neutral-950);
     --ui-border: var(--ui-color-neutral-900);
   }
   body {
     background-color: var(--ui-bg);
     color: var(--ui-text);
     transition: background-color .3s;
   }
Nuxt UI CSS Variables 4. Transition on CSS variables:
If you use CSS variables for background color, the transition should still work as long as the variable changes and the property is transitioned. 5. No evidence of built-in fade for color mode in Nuxt UI:
The knowledge sources do not mention any built-in fade animation for color mode changes in @nuxtjs/color-mode or Nuxt UI. The fade effect relies on your CSS transition. Summary:
Make sure the transition is applied to the element that actually receives the class change (.dark, .sepia, etc.). If @nuxtjs/color-mode toggles the class on <html>, move your transition to html. If you use Nuxt UI's variables, ensure your transition is on the property using those variables. There is no special built-in fade for color mode changes; it is handled by your CSS transition. If after these adjustments the fade still does not work, the knowledge sources do not provide further troubleshooting steps for this specific issue. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•3mo ago
<@438416989422354434> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
0Julian0
0Julian0OP•3mo ago
@kapa.ai ColorPicker.vue: 
<script setup>
function iconName(theme) {
  if (theme === 'system') return 'i-ph-laptop'
  if (theme === 'light') return 'i-ph-sun'
  if (theme === 'dark') return 'i-ph-moon'
  return 'i-ph-coffee'
}
</script>

<template>
  <div>
    <ul>
      <li
        v-for="theme of ['system', 'light', 'dark', 'sepia']"
        :key="theme"
        :class="{
          preferred: !$colorMode.unknown && theme === $colorMode.preference,
          selected: !$colorMode.unknown && theme === $colorMode.value,
        }"
      >
        <Icon
          :name="iconName(theme)"
          class="size-6"
          @click="$colorMode.preference = theme"
        />
      </li>
    </ul>
    <p>
      <ColorScheme
        placeholder="..."
        tag="span"
      >
        Preference: <b>{{ $colorMode.preference }}</b>
        <span v-if="$colorMode.preference === 'system'">&nbsp;(<i>{{ $colorMode.value }}</i> mode detected)</span>
        <span v-if="$colorMode.forced">&nbsp;(<i>{{ $colorMode.value }}</i> forced)</span>
      </ColorScheme>
    </p>
  </div>
</template>

<style scoped>
ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
ul li {
  display: inline-block;
  padding: 5px;
  margin-right: 10px;
  line-height: 0;
}
p {
  margin: 0;
  padding-top: 5px;
  padding-bottom: 20px;
}
li {
  position: relative;
  top: 0px;
  cursor: pointer;
  padding: 7px;
  background-color: var(--bg-secondary);
  border: 2px solid var(--border-color);
  margin: 0;
  border-radius: 5px;
  transition: all 0.1s ease;
}
li:hover {
  top: -3px;
}
li.preferred {
  border-color: var(--color-primary);
  top: -3px;
}
li.selected {
  color: var(--color-primary);
}
</style>
<script setup>
function iconName(theme) {
  if (theme === 'system') return 'i-ph-laptop'
  if (theme === 'light') return 'i-ph-sun'
  if (theme === 'dark') return 'i-ph-moon'
  return 'i-ph-coffee'
}
</script>

<template>
  <div>
    <ul>
      <li
        v-for="theme of ['system', 'light', 'dark', 'sepia']"
        :key="theme"
        :class="{
          preferred: !$colorMode.unknown && theme === $colorMode.preference,
          selected: !$colorMode.unknown && theme === $colorMode.value,
        }"
      >
        <Icon
          :name="iconName(theme)"
          class="size-6"
          @click="$colorMode.preference = theme"
        />
      </li>
    </ul>
    <p>
      <ColorScheme
        placeholder="..."
        tag="span"
      >
        Preference: <b>{{ $colorMode.preference }}</b>
        <span v-if="$colorMode.preference === 'system'">&nbsp;(<i>{{ $colorMode.value }}</i> mode detected)</span>
        <span v-if="$colorMode.forced">&nbsp;(<i>{{ $colorMode.value }}</i> forced)</span>
      </ColorScheme>
    </p>
  </div>
</template>

<style scoped>
ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
ul li {
  display: inline-block;
  padding: 5px;
  margin-right: 10px;
  line-height: 0;
}
p {
  margin: 0;
  padding-top: 5px;
  padding-bottom: 20px;
}
li {
  position: relative;
  top: 0px;
  cursor: pointer;
  padding: 7px;
  background-color: var(--bg-secondary);
  border: 2px solid var(--border-color);
  margin: 0;
  border-radius: 5px;
  transition: all 0.1s ease;
}
li:hover {
  top: -3px;
}
li.preferred {
  border-color: var(--color-primary);
  top: -3px;
}
li.selected {
  color: var(--color-primary);
}
</style>
kapa.ai
kapa.ai•3mo ago
Let me check the knowledge base for you again. One moment! :books: ---------------------- Your ColorPicker.vue component is a custom theme switcher for Nuxt's color mode system. It uses $colorMode to read and set the user's color mode preference, and displays icons for each theme option. Here’s a review based on the knowledge sources: Key Points: - The approach of using $colorMode.preference = theme to set the color mode is correct and matches the usage described in the Nuxt UI and @nuxtjs/color-mode documentation. The $colorMode object exposes .preference and .value for reading and setting the current and preferred color mode, respectively Nuxt UI Color Mode Usage. - The use of a computed icon name for each theme is a standard pattern and aligns with how Nuxt UI allows for custom icons in color mode controls ColorModeButton. - The UI logic for highlighting the preferred and selected theme is clear and matches the expected behavior for a theme switcher. - The <ColorScheme> component is used to display the current preference and detected/forced mode, which is a recommended way to show color mode state in Nuxt Nuxt UI Color Mode Usage. What the knowledge sources do not cover: - The sources do not provide a direct example of a custom theme switcher exactly like yours, but your implementation is consistent with the documented API and usage patterns. - There is no mention of a built-in Icon component in Nuxt UI; ensure you are using a compatible icon component (such as one from Nuxt UI or Iconify, which Nuxt UI supports Nuxt UI Icons). Summary:
Your component follows the recommended practices for interacting with Nuxt's color mode system. The logic for setting and displaying the color mode is correct according to the official documentation. If you encounter any issues, ensure that your icon component is properly set up and that your CSS variables are defined for all color modes you support. If you have a specific issue or error with this component, please provide more details so I can assist further. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•3mo ago
<@438416989422354434> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Did you find this page helpful?