如何为@nuxt/content中的所有.md页面启用暗模式

Question

以任何方式为

.md

页面设置 colorMode 在

Nuxt3

中不起作用。

我确实有一个 Nuxt3 应用程序 +

@nuxt/content

模块，并且希望默认情况下所有页面都处于黑暗状态。我尝试过的：

1. 在 .md 文件中

---
title: Home
navigation: false
colorMode: dark
layout: page
---

和

---
title: Home
navigation: false
colorMode:
  preference: dark
  forced: true
  fallback: dark
layout: page
---

2. 在

   src/app.vue

<script setup>
definePageMeta({
   colorMode: 'dark',
})
</script>

3. 在

   nuxt.config.ts

  colorMode: {
    classSuffix: '',
    preference: 'dark',
    fallback: 'dark',
  }

和

 content: {
    documentDriven: {
      globals: {
        theme: {
          colorMode: {
            classSuffix: '',
            preference: 'dark',
            fallback: 'dark',
          }
        }
      }
    },
  },

这一切都不起作用。

我只能使用

为各个.vue页面设置颜色

definePageMeta({
   colorMode: 'dark',
})

但我的主要内容在

/content/*.md

文件中，我显然无法将主题设置为黑暗。

Answer 1

1.在 .md 文件中

.md 文件中的

colorMode

变量不会自动匹配

@nuxtjs/color-mode

设置。这是因为

@nuxt/content

模块和

@nuxtjs/color-mode

模块没有集成。

2.在app.vue中

根据

@nuxtjs/color-mode

的官方文档，

definePageMeta({ colorMode: 'dark' })

仅适用于/pages目录中的.vue文件。因此，它不能在app.vue中使用。

3.在 nuxt.config.ts 中

此方法仅在

localStorage

没有任何颜色模式设置时才能正常工作。这是因为无论您如何设置

@nuxtjs/color-mode

值，

preference

模块都会优先读取和使用 localStorage 中的设置。

结论

如果你想保证所有页面都使用深色模式，可以在

app.vue

中这样设置：

const colorMode = useColorMode();
colorMode.preference = 'dark';