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

方案1：通过布局页面读取.md元数据设置colorMode #

.md文件的前置元数据不会直接被@nuxt/color-mode识别，需要对应的布局页面接收并应用配置。假设你使用的布局是layouts/page.vue，修改该文件：

<script setup>
// 读取当前内容页的元数据
const { data: page } = useContent()
// 从元数据取colorMode，默认设为dark
const colorModePref = page.value?.colorMode || 'dark'

definePageMeta({
  colorMode: colorModePref
})
</script>

<template>
  <slot />
</template>

之后可在.md文件前置元数据中简化配置：

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

方案2：全局强制所有页面启用暗色模式 #

若无需按页面单独设置，直接全局锁定暗色模式。确保@nuxt/color-mode已安装，修改nuxt.config.ts：

export default defineNuxtConfig({
  modules: ['@nuxt/content', '@nuxt/color-mode'],
  colorMode: {
    preference: 'dark',   // 默认偏好暗色
    fallback: 'dark',     // 系统不支持时 fallback 到暗色
    forced: true,         // 可选：强制锁定，用户无法切换
    classSuffix: ''
  }
})

可在app.vue中主动触发设置，避免缓存影响：

<script setup>
const colorMode = useColorMode()
onMounted(() => {
  colorMode.preference = 'dark'
})
</script>

方案3：利用Document-driven全局配置 #

启用document-driven模式后，先在content/globals/theme.md定义全局主题：

---
colorMode: dark
---

修改nuxt.config.ts的content配置：

export default defineNuxtConfig({
  modules: ['@nuxt/content', '@nuxt/color-mode'],
  content: {
    documentDriven: true,
    globals: {
      theme: {
        type: 'theme',
        path: 'globals/theme'
      }
    }
  },
  colorMode: {
    classSuffix: ''
  }
})

最后在布局页面读取全局主题并应用：

<script setup>
const { theme } = useContent()

definePageMeta({
  colorMode: theme.value?.colorMode || 'dark'
})
</script>

注意事项 #

• 确认@nuxt/color-mode已正确安装（npm install @nuxt/color-mode）
• 检查是否有自定义插件、布局代码覆盖了colorMode配置
• 测试前清除浏览器缓存，colorMode偏好会存在localStorage中

内容的提问来源于stack exchange，提问作者shershen