Implementing Dark Mode in Nuxt3 with nuxt-content on ContentRendererMarkdown Component

Question

I'm currently working with Nuxt3 Prime Vue and using the nuxt-content module. My project involves implementing a dark mode feature, specifically for the ContentRendererMarkdown component. However, I'm facing an issue where the dark mode doesn't seem to be functioning as expected on this component.

Could someone guide me on how to resolve this? I'm looking for a way to enable dark mode effectively on the ContentRendererMarkdown component.

Below is the relevant code snippet from my project:

<template>
  <client-only>
    <nuxt-layout name="article">
      <article class="w-[48.625rem]">
        <ContentDoc v-slot="{ doc }" :path="`/articles/${slug}`">
          <div class="text-xl">{{ doc.title }}</div>
          <ContentRendererMarkdown :value="doc"></ContentRendererMarkdown>
        </ContentDoc>
      </article>
    </nuxt-layout>
  </client-only>
</template>

<script setup lang="ts">
const { slug } = useRoute().params;
</script>

<style scoped>
:deep(p:not(:last-child)),
:deep(li:not(:last-child)),
:deep(blockquote:not(:last-child)),
:deep(h1:not(:last-child)),
:deep(h2:not(:last-child)),
:deep(h3:not(:last-child)),
:deep(h4:not(:last-child)),
:deep(pre:not(:last-child)),
:deep(table:not(:last-child)) {
  @apply mb-4;
}

:deep(h1) {
  @apply text-3xl font-bold text-black dark:text-white;
}
:deep(h2) {
  @apply text-2xl font-bold text-onyx-black dark:text-white;
}
:deep(h3) {
  @apply text-xl font-bold text-onyx-black dark:text-white;
}
:deep(h4) {
  @apply text-lg font-bold text-onyx-black dark:text-white;
}
:deep(h5) {
  @apply text-base font-bold text-onyx-black dark:text-white;
}

:deep(pre) {
  @apply rounded-md bg-gray-100 dark:bg-black p-4 text-sm;
}
:deep(code) {
  @apply bg-gray-100 text-pink-600 rounded-md px-[0.25rem] py-[0.125rem];
}
</style>

I appreciate any insights or suggestions you might have. Thank you!

I want to work dark mode in ContentRendererMarkdown component