Colors not fading when using @nuxtjs/color-mode

Hey, I am trying to implement a dark/light mode system using the

@nuxtjs/color-mode

@nuxtjs/color-mode

@nuxtjs/color-mode

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

<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': {},
    },
  },
})

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>

<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

Colors not fading when using @nuxtjs/color-mode

Similar Threads

Similar Threads

Similar Threads