Changelog

feat: add support for data-* attribute in <html> tag by @danielroe in #144
chore: update to nuxt rc by @danielroe in #139
chore: upgrade dev deps and refresh lockfile by @danielroe in #148

Full Changelog: https://github.com/nuxt-community/color-mode-module/compare/v3.0.3...v3.1.0

v3.1.0

@Atinux

May 31, 2022

What's Changed

chore(deps): update actions/cache action to v3 by @renovate in #133
chore(deps): update actions/setup-node action to v3 by @renovate in #129
chore(deps): update codecov/codecov-action action to v3 by @renovate in #136
chore(deps): update devdependency @nuxtjs/eslint-config-typescript to v9 by @renovate in #131
chore: refresh lockfile by @danielroe in #137
fix: rename useMeta to useHead by @Intevel in #135
fix(plugin): prevent infinite loop on watch by @benjamincanac in #145

New Contributors

@Intevel made their first contribution in #135
@benjamincanac made their first contribution in #145

Full Changelog: https://github.com/nuxt-community/color-mode-module/compare/v3.0.2...v3.0.3

👍 3

v3.0.2

@Atinux

May 10, 2022

Bug Fixes

move script to head and set forced color mode on <html> element (#128) (273f07e)

v3.0.1

@danielroe

February 21, 2022

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.

▶️ Online playground

🔥 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 use definePageMeta but instead continue using the component option colorMode.
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.

👍 4🎉 6❤️ 6🚀 8

v3.0.0

@danielroe

February 16, 2022

fix: add script to webpack build (in dev) for storybook support (#99) · 54b482b

v2.1.1

@Atinux

August 2, 2021

feat: add csp hash for color script (#94) · e2f1ffc
test: migrate to @nuxt/test-utils (#96) · 30dcff2
test: fill out additional test targets (#97) · 2ca9edc

v2.1.0

@Atinux

August 2, 2021

fix: module stability (#92) · e9aa91c. resolves #89 and #91

🎉 6❤️ 5

v2.0.10

@Atinux

June 11, 2021

Bug Fixes

types compatible with nuxt-property-decorator (#72) (43f5806)

v2.0.4

@Atinux

March 3, 2021

fix: don't use window in created (#59) · 9b47c6e
fix(type-defs): make interface ColorModeInstance extend Vue (#62) · bac6667

v2.0.3

@Atinux

January 25, 2021

Bug Fixes

type-defs: make all options optional (#56) (7d2aaff)

v2.0.2

@Atinux

December 4, 2020

Bug Fixes

type-defs: add types reference to package (#52) (82592f4)

v2.0.1

@Atinux

December 2, 2020

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.