# @nuxtjs/color-mode > Dark and light mode for Nuxt with auto detection Latest version **4.0.1** (published 2026-06-09) · MIT license · 0 weekly downloads ## Install ```sh npm install @nuxtjs/color-mode pnpm add @nuxtjs/color-mode yarn add @nuxtjs/color-mode bun add @nuxtjs/color-mode ``` ## Health **Score 65/100 (B)** — status: active. Positive: esm support; no vulnerabilities; has provenance; recently updated; high maintenance score. Warnings: low downloads; no types. ## Facts | | | |---|---| | Version | 4.0.1 | | Published | 2026-06-09 | | First published | 2020-04-15 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | ESM + CommonJS | | Dependencies | 5 | | Unpacked size | 22.9 KB | | Known vulnerabilities | 0 | | Install scripts | no | | Provenance | attested (GitHub Actions) | | GitHub stars | 1225 | ## Links - npm: https://www.npmjs.com/package/@nuxtjs/color-mode - Repository: https://github.com/nuxt-modules/color-mode - npm.io page: https://npm.io/package/@nuxtjs/color-mode ## Dependencies (5) - [pathe](https://npm.io/package/pathe.md) ^2.0.3 - [semver](https://npm.io/package/semver.md) ^7.8.1 - [exsolve](https://npm.io/package/exsolve.md) ^1.0.8 - [@nuxt/kit](https://npm.io/package/@nuxt/kit.md) ^4.4.6 - [pkg-types](https://npm.io/package/pkg-types.md) ^2.3.1 ## Recent versions - 4.0.1 (latest) — 2026-06-09 - 3.0.0-beta.1 (beta) — 2022-02-16 - 4.0.0 — 2025-11-11 - 3.5.2 — 2024-10-24 - 3.5.1 — 2024-09-14 - 3.5.0 — 2024-09-13 - 3.4.4 — 2024-08-16 - 3.4.2 — 2024-06-24 - 3.4.1 — 2024-04-26 - 3.4.0 — 2024-04-11 - 3.3.3 — 2024-03-19 - 3.3.2 — 2023-11-15 - 3.3.1 — 2023-11-15 - 3.3.0 — 2023-06-21 - 3.2.0 — 2022-11-24 - … 34 more at https://npm.io/package/@nuxtjs/color-mode/versions ## 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] Volta board 🌑 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.nuxt.dev//)

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 - Add `.${color}` 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) [📖  Read more](https://color-mode.nuxtjs.org) **Note**: v4 of `@nuxtjs/color-mode` is compatible with [Nuxt 3+](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 --- _Source: https://npm.io/package/@nuxtjs/color-mode · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._