入门

配置

配置颜色模式模块

你可以通过在 nuxt.config.ts 中提供 colorMode 属性来配置该模块。以下是默认选项：

nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxtjs/color-mode'],
  colorMode: {
    preference: 'system', // $colorMode.preference 的默认值
    fallback: 'light', // 未检测到系统偏好时的回退值
    globalName: '__NUXT_COLOR_MODE__',
    componentName: 'ColorScheme',
    classPrefix: '',
    classSuffix: '',
    storage: 'localStorage', // 或 'sessionStorage' 或 'cookie'
    storageKey: 'nuxt-color-mode'
  }
})

选项

preference

  • 类型：string
  • 默认值：'system'

默认的颜色模式偏好。'system' 是一个特殊值，会根据系统偏好自动检测颜色模式。

fallback

  • 类型：string
  • 默认值：'light'

如果未检测到系统偏好，则使用的回退颜色模式值。

dataValue

  • 类型：string
  • 默认值：undefined

可选的数据集属性，添加到 <html> 元素上。例如，如果设置 dataValue: 'theme'，则会在 <html> 上添加 data-theme="dark"。这对于使用 daisyUI 等库时非常有用。

storage

  • 类型：'localStorage' | 'sessionStorage' | 'cookie'
  • 默认值：'localStorage'

用于持久化颜色模式偏好的存储类型。

storageKey

  • 类型：string
  • 默认值：'nuxt-color-mode'

存储的键名。

强制颜色模式

学习如何在页面上强制使用特定颜色模式

注意事项

使用颜色模式时的重要考虑