More Premium Hugo Themes Premium Nuxt Themes

Color Mode

Dark and Light mode with auto detection made easy with Nuxt

Color Mode

Dark and Light mode with auto detection made easy with Nuxt

Author Avatar Theme by nuxt-modules
Github Stars Github Stars: 1162
Last Commit Last Commit: Apr 12, 2025 -
First Commit Created: Dec 18, 2023 -
default image

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:

  1. Clone the repository locally:
git clone {repository_url}
  1. Install dependencies using pnpm:
pnpm install
  1. 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.