[![@nuxtjs/color-mode](https://color-mode.nuxtjs.org/cover.jpg)](https://color-mode.nuxtjs.org)
# Nuxt Color Mode
[![npm version][npm-version-src]][npm-version-href]
[![npm downloads][npm-downloads-src]][npm-downloads-href]
[![License][license-src]][license-href]
[![Nuxt][nuxt-src]][nuxt-href]
<a href="https://volta.net/nuxt-modules/color-mode?utm_source=nuxt_color_mode_readme"><img src="https://user-images.githubusercontent.com/904724/209143798-32345f6c-3cf8-4e06-9659-f4ace4a6acde.svg" alt="Volta board"></a>
🌑 Dark and 🌕 Light mode with auto detection made easy with Nuxt.
[![nuxt-color-mode](https://user-images.githubusercontent.com/904724/79349768-f09cf080-7f36-11ea-93bb-20fae8c94811.gif)](https://color-mode.nuxtjs.app/)
<p align="center">
<a href="https://color-mode.nuxtjs.app">Live demo</a>
</p>
- [✨ Release Notes](https://color-mode.nuxtjs.org/releases)
- [📖 Documentation](https://color-mode.nuxtjs.org)
- [▶️ Online playground](https://stackblitz.com/edit/nuxt-color-mode)
## 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](https://drafts.csswg.org/mediaqueries-5/#descdef-media-prefers-color-mode)
- Supports IE9+ 👴
[📖 Read more](https://color-mode.nuxtjs.org)
**Note**: v3 of `@nuxtjs/color-mode` is compatible with [Nuxt 3 and Nuxt Bridge](https://nuxt.com). If you're looking for the previous version of this module, check out [the previous docs](https://v2.color-mode.nuxtjs.org/), or [read more about the differences](https://color-mode.nuxtjs.org/#migrating-to-v3).
## Contributing
You can contribute to this module online with CodeSandBox:
[![Edit @nuxtjs/color-mode](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/nuxt-modules/color-mode/tree/main/?fontsize=14&hidenavigation=1&theme=dark)
Or locally:
1. Clone this repository
2. Install dependencies using `pnpm install`
3. Start development server using `pnpm dev`
## License
[MIT License](./LICENSE)
Copyright (c) Nuxt Team
<!-- Badges -->
[npm-version-src]: https://img.shields.io/npm/v/@nuxtjs/color-mode/latest.svg?style=flat&colorA=18181B&colorB=28CF8D
[npm-version-href]: https://npmjs.com/package/@nuxtjs/color-mode
[npm-downloads-src]: https://img.shields.io/npm/dm/@nuxtjs/color-mode.svg?style=flat&colorA=18181B&colorB=28CF8D
[npm-downloads-href]: https://npmjs.com/package/@nuxtjs/color-mode
[codecov-src]: https://img.shields.io/codecov/c/github/nuxt-modules/color-mode.svg?style=flat&colorA=18181B&colorB=28CF8D
[codecov-href]: https://codecov.io/gh/nuxt-modules/color-mode
[license-src]: https://img.shields.io/npm/l/@nuxtjs/color-mode.svg?style=flat&colorA=18181B&colorB=28CF8D
[license-href]: https://npmjs.com/package/@nuxtjs/color-mode
[nuxt-src]: https://img.shields.io/badge/Nuxt-18181B?logo=nuxt.js
[nuxt-href]: https://nuxt.com