@nuxtjs/color-mode
Advanced tools
🌑 Dark and 🌕 Light mode with auto detection made easy with NuxtJS
.${color}-mode class to <html> for easy CSS themingstatic or server) and rendering (universal and spa)ℹ️ 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
@nuxtjs/color-mode dependency to your projectyarn add --dev @nuxtjs/color-mode
# OR npm install --save-dev @nuxtjs/color-mode
@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.
.dark-mode and .light-mode classesIt injects $colorMode helper with:
preference: Actual color-mode selected (can be 'system'), update it to change the user preferred 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
sameSite: 'lax' // https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Set-Cookie/SameSite
}
}
}
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. Each option will recursively overwrite the default property (by using defu).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: Stringtag: String, default: 'span'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.
You can contribute to this module online with CodeSandBox:
Or locally:
yarn install or npm installyarn dev or npm run devCopyright (c) NuxtJS Team
FAQs
Dark and Light mode for Nuxt with auto detection
The npm package @nuxtjs/color-mode receives a total of 79,778 weekly downloads. As such, @nuxtjs/color-mode popularity was classified as popular.
We found that @nuxtjs/color-mode demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 8 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Bun 1.2 enhances its JavaScript runtime with 90% Node.js compatibility, built-in S3 and Postgres support, HTML Imports, and faster, cloud-first performance.
Security News
Biden's executive order pushes for AI-driven cybersecurity, software supply chain transparency, and stronger protections for federal and open source systems.
Security News
Fluent Assertions is facing backlash after dropping the Apache license for a commercial model, leaving users blindsided and questioning contributor rights.