๐ Dark and ๐ Light mode with auto detection made easy with NuxtJS
- Add
.${color}-mode
class to<html>
for easy CSS theming - Works with any NuxtJS target (
static
orserver
) and rendering (universal
andspa
) - 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
- 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 thebuildModules
section of yournuxt.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
It injects $colorMode
helper with:
preference
: Actual color-mode selected (can be'system'
), update it to change the user prefered color modevalue
: Useful to know what color mode has been detected when$colorMode === 'system'
, you should not update itunknown
: 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.
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'
. Ifno-preference
is detected or the browser does not handle color-mode, it will set thefallback
value.cookie
are the options where to store the chosen color mode (to make it work universally), thecookie.options
are available on the cookie serialize options documentation.
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'
You can easily integrate this module with tailwindcss-dark-mode by just setting darkSelector: '.dark-mode'
, see changing the selector documentation.
You can contribute to this module online with CodeSandBox:
Or locally:
- Clone this repository
- Install dependencies using
yarn install
ornpm install
- Start development server using
yarn dev
ornpm run dev
Copyright (c) NuxtJS Team