为Nuxt.Js安装黑暗模式

Question

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

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

所以我想知道你们中是否有人知道如何使用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
    }
  }
}