Discover the latest Nuxt Color Mode updates.
Full Changelog: https://github.com/nuxt-community/color-mode-module/compare/v3.1.1...v3.1.2
data-*
attribute in <html>
tag by @danielroe in #144Full Changelog: https://github.com/nuxt-community/color-mode-module/compare/v3.0.3...v3.1.0
Full Changelog: https://github.com/nuxt-community/color-mode-module/compare/v3.0.2...v3.0.3
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.
@nuxt/module-builder
to build module.lib
-> src
/dist
, templates
-> runtime
)esbuild
to minify the script - note: ⚠️ it's likely this raises the minimum browser target ⚠️definePageMeta
: <template> <h1>This page is forced with light mode</h1> </template> <script>- export default {- colorMode: 'light',- }+ definePageMeta({+ colorMode: 'light',+ }) </script>
definePageMeta
but instead continue using the component option colorMode
.$colorMode
helper remains the same, but there is also a new composable (useColorMode
) which is the recommended way of accessing color mode information.ModuleOptions
.cookie
option in the V1, if you don't use it, you can upgrade easily.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
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
.
See Changelog.md