Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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: about 2 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 (over 4 years ago)
Default Branch: main
Last Pushed: 2024-05-20T23:57:32.000Z (4 months ago)
Last Synced: 2024-05-22T10:43:19.920Z (4 months ago)
Topics: color-scheme, dark-mode, dark-theme, nuxt-module
Language: TypeScript
Homepage: https://color-mode.nuxtjs.org
Size: 2.64 MB
Stars: 1,039
Watchers: 11
Forks: 97
Open Issues: 48
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE

Awesome Lists containing this project

README

        [![@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]



🌑 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://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 `` 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