为Nuxt.Js安装黑暗模式

Question

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

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

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

提前感谢！

Answer 1

2020更新

可以使用@ nuxtjs / color-mode库轻松完成此操作HERE是此操作的示例

1. 将@ nuxtjs / color-mode依赖项添加到您的项目中
2. 向nuxt.config.js的buildModules部分添加@ nuxtjs / color-mode
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
    }
  }
}