Colors not fading when using @nuxtjs/color-mode

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

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

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