🎤 Nuxt Nation is coming - The largest online Nuxt Conference is happening on October 18-19, 2023. Register
color-mode

color-mode

Go to documentation

Dark and Light mode for Nuxt with auto detection

Sébastien Chopin
1 maintainer183k installs936 stars

v3.1.8 by AtinuxAtinux

Full Changelog: https://github.com/nuxt-modules/color-mode/compare/v3.1.7...v3.1.8

v3.1.6 by AtinuxAtinux

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 AtinuxAtinux

What's Changed

New Contributors

Full Changelog: https://github.com/nuxt-modules/color-mode/compare/v3.1.4...v3.1.5

v3.1.4 by AtinuxAtinux

What's Changed

New Contributors

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

v3.1.3 by AtinuxAtinux

Bug Fixes

  • handle data attribute in script as well (30b173e)

v3.1.2 by danielroedanielroe

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 AtinuxAtinux

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

v3.1.0 by AtinuxAtinux

What's Changed

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

v3.0.2 by AtinuxAtinux

What's Changed

New Contributors

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

v3.0.1 by danielroedanielroe

Bug Fixes

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

v3.0.0 by danielroedanielroe

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

  1. Uses @nuxt/module-builder to build module.
  2. Refactor structure (lib -> src/dist, templates -> runtime)
  3. rewrite in TypeScript
  4. Move from templating options to creating a virtual module for greater performance
  5. Use esbuild to minify the script - note: ⚠️ it's likely this raises the minimum browser target ⚠️

👉 Migration

  1. 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.
  2. The $colorMode helper remains the same, but there is also a new composable (useColorMode) which is the recommended way of accessing color mode information.
  3. If you were directly importing color mode configuration types, note that this has been renamed to ModuleOptions.

v2.1.1 by AtinuxAtinux

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

v2.1.0 by AtinuxAtinux

  • 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.0.10 by AtinuxAtinux

v2.0.4 by AtinuxAtinux

Bug Fixes

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

v2.0.3 by AtinuxAtinux

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

v2.0.2 by AtinuxAtinux

Bug Fixes

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

v2.0.1 by AtinuxAtinux

Bug Fixes

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

v2.0.0 by AtinuxAtinux

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.1 by AtinuxAtinux

Bug Fixes

  • types: add new options and include in package (00bb7e8)

v1.1.0 by AtinuxAtinux

Features

v1.0.3 by AtinuxAtinux

Bug Fixes

  • handle spa fallback (regression) (b92d64b), closes #21

v1.0.2 by AtinuxAtinux

See Changelog.md