https://github.com/nuxt-community/color-mode-module

Dark and Light mode with auto detection made easy with Nuxt 🌗
https://github.com/nuxt-community/color-mode-module

color-scheme dark-mode dark-theme nuxt-module

Last synced: 3 months ago
JSON representation

Dark and Light mode with auto detection made easy with Nuxt 🌗

• Host: GitHub
• URL: https://github.com/nuxt-community/color-mode-module
• Owner: nuxt-modules
• License: mit
• Created: 2020-04-14T12:18:47.000Z (almost 5 years ago)
• Default Branch: main
• Last Pushed: 2024-10-29T01:10:45.000Z (3 months ago)
• Last Synced: 2024-10-29T15:09:29.849Z (3 months ago)
• Topics: color-scheme, dark-mode, dark-theme, nuxt-module
• Language: TypeScript
• Homepage: https://color-mode.nuxtjs.org
• Size: 4.08 MB
• Stars: 1,105
• Watchers: 10
• Forks: 110
• Open Issues: 46
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
[![@nuxtjs/color-mode](https://color-mode.nuxtjs.org/social-card.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]



🌑 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/)



  Live demo



- [✨  Release Notes](https://github.com/nuxt-modules/color-mode/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 `` 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

[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