Package Exports

@nuxtjs/color-mode

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@nuxtjs/color-mode) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

@nuxtjs/color-mode

🌑 Dark and 🌕 Light mode with auto detection made easy with NuxtJS

📖 Release Notes

Demo

See live demo

Features

Add .${color}-mode class to <html> for easy CSS theming
Works with any NuxtJS target (static or server) and rendering (universal and spa)
Auto detect the system color-mode
Sync between tabs 🔄
Supports IE9+ 👴

ℹ️ This module is using a cookie to support server-side rendering, if your visitors are located in Europe, make sure to follow the EU cookie directive

Setup

Add @nuxtjs/color-mode dependency to your project

yarn add --dev @nuxtjs/color-mode
# OR npm install --save-dev @nuxtjs/color-mode

Add @nuxtjs/color-mode to the buildModules section of your nuxt.config.js

{
  buildModules: [
    // Simple usage
    '@nuxtjs/color-mode'
  ]
}

ℹ️ If you are using nuxt < 2.9.0, use modules property instead.

Start theming your CSS with .dark-mode and .ligh-mode classes

Usage

It injects $colorMode helper with:

preference: actual color-mode selected (can be 'system'), update it to change the user prefered color mode
value: useful to know what color mode has been detected when $colorMode === 'system', you should not update it

<template>
  <div>
    <h1>Color mode: {{ $colorMode.value }}</h1>
    <select v-model="$colorMode.preference">
      <option value="system">System</option>
      <option value="light">Light</option>
      <option value="dark">Dark</option>
      <option value="sepia">Sepia</option>
    </select>
  </div>
</template>

<style>
body {
  background-color: #fff;
  color: rgba(0,0,0,0.8);
}
.dark-mode body {
  background-color: #091a28;
  color: #ebf4f1;
}
.sepia-mode body {
  background-color: #f1e7d0;
  color: #433422;
}
</style>

You can see a more advanced example in the example/ directory.

Configuration

You can configure the module by providing the colorMode property in your nuxt.config.js, here are the default options:

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

Notes:

'system' is a special value, it will automatically detect the color mode based on the system preferences (see prefers-color-mode spec). The value injected will be either 'light' or 'dark'. If no-preference is detected or the browser does not handle color-mode, it will set the fallback value.
cookie are the options where to store the chosen color mode (to make it work universally), the cookie.options are available on the cookie serialize options documentation.

Caveats

With nuxt generate and using $colorMode in your Vue template, you may expect a flash. This is due to the fact that we cannot know the user preferences when pre-rendering the page, it will directly set the fallback value (or default value if no set to 'system').

TailwindCSS Dark Mode

You can easily integrate this module with tailwindcss-dark-mode by just setting darkSelector: '.dark-mode', see changing the selector documentation.

Contributing

You can contribute to this module online with CodeSandBox:

Or locally:

Clone this repository
Install dependencies using yarn install or npm install
Start development server using yarn dev or npm run dev

License

MIT License