
color-mode
Go to documentationDark and Light mode for Nuxt with auto detection
v3.1.8 by
Atinux
v3.1.6 by
Atinux
What's Changed
- fix: inject color-mode script with nitro plugin (handles mixed spa/ssr) by @danielroe in #164
Full Changelog: https://github.com/nuxt-modules/color-mode/compare/v3.1.5...v3.1.6
v3.1.5 by
Atinux
What's Changed
- fix: color mode in server by @Luferov in #159
- docs: migrate to latest docus by @smarroufin in #150
- docs: upgrade docus by @smarroufin in #151
- docs: update logo & social preview by @smarroufin in #152
- chore: upgrade deps by @Atinux in #157
- chore: update deps ro rc9 by @Atinux in #160
New Contributors
- @smarroufin made their first contribution in #150
- @Luferov made their first contribution in #159
Full Changelog: https://github.com/nuxt-modules/color-mode/compare/v3.1.4...v3.1.5
v3.1.4 by
Atinux
What's Changed
- fix: works with ssr: false by @antfu in nuxt-community/color-mode-module#149
New Contributors
- @antfu made their first contribution in nuxt-community/color-mode-module#149
Full Changelog: https://github.com/nuxt-community/color-mode-module/compare/v3.1.3...v3.1.4
v3.1.2 by
danielroe
Bug Fixes
- add missing imports in client-plugin (c0ce7b2)
Full Changelog: https://github.com/nuxt-community/color-mode-module/compare/v3.1.1...v3.1.2
v3.1.1 by
Atinux
v3.1.0 by
Atinux
What's Changed
- feat: add support for
data-*
attribute in<html>
tag by @danielroe in nuxt-community/color-mode-module#144 - chore: update to nuxt rc by @danielroe in nuxt-community/color-mode-module#139
- chore: upgrade dev deps and refresh lockfile by @danielroe in nuxt-community/color-mode-module#148
Full Changelog: https://github.com/nuxt-community/color-mode-module/compare/v3.0.3...v3.1.0
v3.0.2 by
Atinux
What's Changed
- chore(deps): update actions/cache action to v3 by @renovate in nuxt-community/color-mode-module#133
- chore(deps): update actions/setup-node action to v3 by @renovate in nuxt-community/color-mode-module#129
- chore(deps): update codecov/codecov-action action to v3 by @renovate in nuxt-community/color-mode-module#136
- chore(deps): update devdependency @nuxtjs/eslint-config-typescript to v9 by @renovate in nuxt-community/color-mode-module#131
- chore: refresh lockfile by @danielroe in nuxt-community/color-mode-module#137
- fix: rename useMeta to useHead by @Intevel in nuxt-community/color-mode-module#135
- fix(plugin): prevent infinite loop on watch by @benjamincanac in nuxt-community/color-mode-module#145
New Contributors
- @Intevel made their first contribution in nuxt-community/color-mode-module#135
- @benjamincanac made their first contribution in nuxt-community/color-mode-module#145
Full Changelog: https://github.com/nuxt-community/color-mode-module/compare/v3.0.2...v3.0.3
v3.0.1 by
danielroe
v3.0.0 by
danielroe
v3 of @nuxtjs/color-mode
requires either Nuxt Bridge or Nuxt 3. If you are using Nuxt 2 without Bridge, you should continue to use v2.
🔥 Notable changes
- Uses
@nuxt/module-builder
to build module. - Refactor structure (
lib
->src
/dist
,templates
->runtime
) - rewrite in TypeScript
- Move from templating options to creating a virtual module for greater performance
- Use
esbuild
to minify the script - note: ⚠️ it's likely this raises the minimum browser target ⚠️
👉 Migration
- The main change between Nuxt 2 -> Nuxt 3 is that you will define your color mode at the page level with
definePageMeta
:<template> <h1>This page is forced with light mode</h1> </template> <script> - export default { - colorMode: 'light', - } + definePageMeta({ + colorMode: 'light', + }) </script>
⚠️ If you are using Nuxt Bridge, you should not usedefinePageMeta
but instead continue using the component optioncolorMode
. - The
$colorMode
helper remains the same, but there is also a new composable (useColorMode
) which is the recommended way of accessing color mode information. - If you were directly importing color mode configuration types, note that this has been renamed to
ModuleOptions
.
v2.1.0 by
Atinux
v2.0.3 by
Atinux
v2.0.0 by
Atinux
Notes
- ⚠️ The breaking change is only if you are using the
cookie
option in the V1, if you don't use it, you can upgrade easily. - 📘 Read the updated documentation
- 🎮 Checkout the updated demo
Force a color mode
You can force the color mode at the page level (only parent) by setting the colorMode
property:
<template>
<h1>This page is forced with light mode</h1>
</template>
<script>
export default {
colorMode: 'light',
}
</script>
This feature is perfect for implementing dark mode to a website incrementally by setting the non-ready pages to colorMode: 'light'
.
We recommend to hide or disable the color mode picker on the page since it won't be able to change the current page color mode, using $colorMode.forced
value.
See example: https://color-mode.nuxtjs.app/light
Local Storage only
This will also fixes #38
Using a cookie is only worth for doing server-side rendering with no cache, where actually localStorage work in every-case and won't lead to a flash on client-side anyway.
This also simplify the options and reduce the dependency with the cookie
package.
To customize the storage key, you now have to use the storageKey
property instead of cookie.key
.
v1.1.0 by
Atinux
v1.0.2 by
Atinux
See Changelog.md