Skip to content

πŸŒ“ Dark and Light mode with auto detection made easy with NuxtJS

License

Notifications You must be signed in to change notification settings

johan-Rm/color-mode-module

Β 
Β 

Repository files navigation

@nuxtjs/color-mode

npm version Github Actions CI Codecov License

πŸŒ‘ Dark and πŸŒ• Light mode with auto detection made easy with NuxtJS

nuxt-color-mode

Live demo

πŸ“– Release Notes

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

  1. Add @nuxtjs/color-mode dependency to your project
yarn add --dev @nuxtjs/color-mode
# OR npm install --save-dev @nuxtjs/color-mode
  1. 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.

  1. Start theming your CSS with .dark-mode and .light-mode classes

Usage

It injects $colorMode helper with:

  • preference: Actual color-mode selected (can be 'system'), update it to change the user preferred color mode
  • value: Useful to know what color mode has been detected when $colorMode === 'system', you should not update it
  • unknown: Useful to know if during SSR or Generate, we need to render a placeholder
<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 or play online on CodeSandBox.

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
  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
    }
  }
}

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

If you are doing SSR (nuxt start or nuxt generate) and if $colorMode.preference is set to 'system', using $colorMode in your Vue template will lead to a flash. This is due to the fact that we cannot know the user preferences when pre-rendering the page since they are detected on client-side.

To avoid the flash, you have to guard any rendering path which depends on $colorMode with $colorMode.unknown to render a placeholder or use our <ColorScheme> component.

Example:

<template>
  <ColorScheme placeholder="..." tag="span">
    Color mode: <b>{{ $colorMode.preference }}</b>
    <span v-if="$colorMode.preference === 'system'">(<i>{{ $colorMode.value }}</i> mode detected)</span>
  </ColorScheme>
</template>

Props:

  • placeholder: String
  • tag: String, default: 'span'

TailwindCSS Dark Mode

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

// tailwind.config.js
module.exports = {
  theme: {
    darkSelector: '.dark-mode'
  },
  variants: {
    backgroundColor: ["dark", "dark-hover", "dark-group-hover", "dark-even", "dark-odd"],
    borderColor: ["dark", "dark-focus", "dark-focus-within"],
    textColor: ["dark", "dark-hover", "dark-active"]
  },
  plugins: [
    require('tailwindcss-dark-mode')()
  ]
}

Checkout a live example on CodeSandBox as well as @nuxtjs/tailwindcss module.

Contributing

You can contribute to this module online with CodeSandBox:

Edit @nuxtjs/tailwindcss

Or locally:

  1. Clone this repository
  2. Install dependencies using yarn install or npm install
  3. Start development server using yarn dev or npm run dev

License

MIT License

Copyright (c) NuxtJS Team

About

πŸŒ“ Dark and Light mode with auto detection made easy with NuxtJS

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 56.0%
  • Vue 39.4%
  • CSS 4.6%