为 Nuxt.Js 安装暗模式

Question

我想为我的 Nuxt.Js 应用程序（使用 Vue.Js）安装一个深色模式，以便我可以在我的应用程序中动态更改我的主题。

我正在使用 Ant 作为前端框架，并且已经发布了一个关于我可以用来修改 color vars 的方法的问题，但我没有答案。

所以我想知道你们中是否有人知道如何使用 Nuxt.Js 安装暗模式

提前致谢！

Answer 1

2020 年更新

这可以通过@nuxtjs/color-mode 库轻松完成，HERE 就是一个例子

1. 将@nuxtjs/color-mode 依赖添加到您的项目中
2. 将 @nuxtjs/color-mode 添加到 nuxt.config.js 的 buildModules 部分
3. 开始使用 .dark-mode 和 .light-mode 类对 CSS 进行主题化

你可以在 nuxt.config.js 中编辑它

colorMode: {
  preference: 'system', // default value of $colorMode.preference
  fallback: 'light', // fallback value if not system preference found
  hid: 'nuxt-color-mode-script',
  globalName: '__NUXT_COLOR_MODE__',
  componentName: 'ColorScheme',
  cookie: {
    key: 'nuxt-color-mode',
    options: {
      path: nuxt.options.router.base // https://nuxtjs.org/api/configuration-router#base
    }
  }
}