Dark theme cannot be loaded

[anhthang]

I'm using Vue ConfigProvider for theme like below sample code, but it seems not working well with colorMode module.

Light mode has no issue, But when the system preference is dark or I select dark mode, the styles is broken (see the image)

But It's working well when I set the theme algorithm is theme.darkAlgorithm

Version

@nuxtjs/color-mode: 3.3.0 nuxt: 3.8.0 ant-design-vue: 4.0.1

Reproduction Link

Steps to reproduce

Here is my code sample

<template>
  <a-config-provider
    :theme="{
      algorithm:
        $colorMode.value === 'dark'
          ? theme.darkAlgorithm
          : theme.defaultAlgorithm,
    }"
  >
    <NuxtLayout>
      <NuxtPage />
    </NuxtLayout>
  </a-config-provider>
</template>
<script setup>
import { theme } from 'ant-design-vue'
</script>

What is Expected?

Dark theme working

What is actually happening?

Dark theme cannot be loaded