@nuxtjs/color-mode

Version:

Dark and Light mode for Nuxt with auto detection

68 lines (45 loc) • 3.08 kB

Markdown

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