[Vuejs]-Install Dark Mode for Nuxt.Js

by

0👍

2020 Update

This can be done easily with the @nuxtjs/color-mode library HERE is an example of this in action

  1. Add @nuxtjs/color-mode dependency to your project
  2. Add @nuxtjs/color-mode to the buildModules section of your nuxt.config.js
  3. Start theming your CSS with .dark-mode and .light-mode classes

You can edit it in 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
    }
  }
}

Leave a comment