Overview:
The @nuxtjs/color-mode is a module that allows easy implementation of dark and light mode with auto detection in Nuxt applications. It supports Nuxt 3 and Nuxt Bridge and provides features such as adding CSS theming, forcing a page to a specific color mode, and auto detecting the system color mode.
Features:
- Nuxt 3 and Nuxt Bridge support
- Adds .${color}-mode class to <html> for easy CSS theming
- Allows forcing a page to a specific color mode
- Works with client-side and universal rendering
- Supports auto detection of system color mode
- Supports IE9+
- Easy to contribute and edit with CodeSandBox or locally
Installation:
To install the @nuxtjs/color-mode module, follow these steps:
- Clone the repository locally:
git clone {repository_url}
- Install dependencies using pnpm:
pnpm install
- Start the development server:
pnpm dev
Summary:
The @nuxtjs/color-mode module is a convenient solution for implementing dark and light mode in Nuxt applications. With its support for Nuxt 3 and Nuxt Bridge, easy CSS theming, and auto detection of system color mode, it provides a seamless user experience. Furthermore, its compatibility with client-side and universal rendering makes it highly versatile.