Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

@nuxtjs/color-mode

nuxt-modules618.8kMIT3.5.2TypeScript support: included

Dark and Light mode for Nuxt with auto detection

readme

@nuxtjs/color-mode

Nuxt Color Mode

npm version npm downloads License Nuxt Volta board

🌑 Dark and 🌕 Light mode with auto detection made easy with Nuxt.

nuxt-color-mode

Live demo

Features

  • Nuxt 3 and Nuxt Bridge support
  • Add .${color}-mode class to <html> for easy CSS theming
  • Force a page to a specific color mode (perfect for incremental development)
  • Works with client-side and universal rendering
  • Auto detect system color-mode
  • Supports IE9+ 👴

📖  Read more

Note: v3 of @nuxtjs/color-mode is compatible with Nuxt 3 and Nuxt Bridge. If you're looking for the previous version of this module, check out the previous docs, or read more about the differences.

Contributing

You can contribute to this module online with CodeSandBox:

Edit @nuxtjs/color-mode

Or locally:

  1. Clone this repository
  2. Install dependencies using pnpm install
  3. Start development server using pnpm dev

License

MIT License

Copyright (c) Nuxt Team

changelog

Changelog

All notable changes to this project will be documented in this file. See standard-version for commit guidelines.

v3.5.2

compare changes

📖 Documentation

  • Add space in installation bash script (#297)
  • Typo (#293)
  • Typo (#290)
  • Typo (#287)

🏡 Chore

❤️ Contributors

v3.5.1

compare changes

🩹 Fixes

  • Synchronize Vue 2 & 3 component behaviour (#285)

📖 Documentation

🏡 Chore

❤️ Contributors

3.5.0 (2024-09-13)

Features

3.4.4 (2024-08-16)

3.4.3 (2024-08-16)

Bug Fixes

  • augment vue rather than @vue/runtime-core (#278) (8efb0f0)

3.4.2 (2024-06-24)

Bug Fixes

  • remove newline at end of minified script (#268) (0ccbc5c)

3.4.1 (2024-04-26)

Bug Fixes

  • add tilde to css selector for tailwind integration (#259) (16ae123)

3.4.0 (2024-04-11)

Features

  • add disableTransition option (#192) (23ef3d9)
  • automatic integration with @nuxtjs/tailwindcss (#237) (7e4db61)

3.3.3 (2024-03-19)

Bug Fixes

3.3.2 (2023-11-15)

Bug Fixes

  • use ref for island color-mode stub and check it is truthy (486c28f)

3.3.1 (2023-11-15)

Bug Fixes

  • avoid setting color-mode when rendering islands (#200) (d856d7a)
  • check when localStorage is available (e4e84fe), closes #202
  • initialise helper to empty object when testing (34c4e0e)

3.3.0 (2023-06-21)

Features

Bug Fixes

3.2.0 (2022-11-24)

⚠ BREAKING CHANGES

  • update to nuxt 3.0.0

  • update to nuxt 3.0.0 (4d01321)

3.1.8 (2022-10-07)

Bug Fixes

  • remove localStorage watch (blink) (b7b32ed)

3.1.7 (2022-10-04)

3.1.6 (2022-09-22)

Bug Fixes

  • inject color-mode script with nitro plugin (handles mixed spa/ssr) (#164) (620ca17)

3.1.5 (2022-09-09)

Bug Fixes

3.1.4 (2022-06-09)

Bug Fixes

3.1.3 (2022-05-31)

Bug Fixes

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

3.1.2 (2022-05-31)

Bug Fixes

  • add missing imports in client-plugin (c0ce7b2)

3.1.1 (2022-05-31)

Bug Fixes

3.1.0 (2022-05-31)

Features

  • add support for data-* attribute in <html> tag (#144) (7a92150)

3.0.3 (2022-05-10)

Bug Fixes

3.0.2 (2022-03-07)

Bug Fixes

  • type helper as $colorMode not colorMode (b2d89bd), closes #130

3.0.1 (2022-02-21)

Bug Fixes

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

3.0.0 (2022-02-16)

⚠ BREAKING CHANGES

  • add support for nuxt 3/nuxt bridge (#118)

Features

2.1.1 (2021-08-02)

Bug Fixes

  • add script to webpack build (in dev) for storybook support (#99) (54b482b), closes #69

2.1.0 (2021-08-02)

Features

2.0.10 (2021-06-11)

Bug Fixes

2.0.9 (2021-05-24)

Bug Fixes

  • move ssr script injection into plugin for nitro compat (#86) (9002bb0)

2.0.8 (2021-05-20)

2.0.7 (2021-05-20)

Bug Fixes

  • move script injection into plugin for nitro compat (#85) (fb31651)

2.0.6 (2021-05-20)

2.0.5 (2021-03-10)

Bug Fixes

2.0.4 (2021-03-03)

Bug Fixes

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

2.0.3 (2021-01-25)

Bug Fixes

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

2.0.2 (2020-12-04)

Bug Fixes

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

2.0.1 (2020-12-02)

Bug Fixes

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

2.0.0 (2020-10-13)

⚠ BREAKING CHANGES

  • Version 2 (#39)

Features

1.1.1 (2020-09-15)

Bug Fixes

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

1.1.0 (2020-09-15)

Features

1.0.3 (2020-08-04)

Bug Fixes

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

1.0.2 (2020-07-28)

Bug Fixes

  • wait hydration to update $colorMode (7a873ab)

1.0.1 (2020-07-27)

Bug Fixes

1.0.0 (2020-04-15)

Features

Bug Fixes

  • color-scheme component and hydration (6f026bc)

0.0.2 (2020-04-15)

Bug Fixes

0.0.1 (2020-04-15)