Nuxt 3.0：巧用color-mode模块，解锁暗/亮模式无缝切换

2024-01-03 09:18:12

Nuxt 3.0中的color-mode模块：

Nuxt 3.0中的color-mode模块是一个内置的模块，它允许您轻松地为您的应用程序添加暗/亮模式切换的功能。这个模块提供了多种配置选项，您可以根据自己的需要进行调整。要使用color-mode模块，您需要在您的Nuxt.config.js文件中进行配置。

export default {
  colorMode: {
    preference: 'system', // 默认跟随系统
    fallback: 'light', // 如果系统没有设置，则默认为light
  },
}

在上面的示例中，我们将color-mode模块的preference选项设置为'system'，这意味着它将跟随系统的设置。如果系统没有设置暗/亮模式，那么它将默认为'light'模式。

自定义暗/亮模式：

除了使用默认设置之外，您还可以自定义暗/亮模式。您可以通过在color-mode模块的config中设置class属性来实现。

export default {
  colorMode: {
    preference: 'system',
    fallback: 'light',
    class: {
      dark: 'dark-mode', // 自定义暗模式类名
      light: 'light-mode', // 自定义亮模式类名
    },
  },
}

在上面的示例中，我们将dark模式的类名设置为'dark-mode'，将light模式的类名设置为'light-mode'。您可以在您的CSS文件中定义这些类名的样式。

在组件中使用color-mode：

在组件中，您可以使用useColorMode()钩子来获取当前的颜色模式。这个钩子返回一个对象，其中包含了当前的颜色模式和一个切换颜色模式的方法。

import { useColorMode } from 'nuxt3/color-mode'

export default {
  setup() {
    const { colorMode } = useColorMode()

    return {
      colorMode,
    }
  },
}

在上面的示例中，我们使用useColorMode()钩子获取当前的颜色模式，并将其存储在colorMode变量中。然后，我们可以在组件的模板中使用colorMode变量来动态地切换样式。