Migrating to v3

v3 of @nuxtjs/color-mode requires either Nuxt Bridge or Nuxt 3. If you are using Nuxt 2 without Bridge, you should continue to use v2.

Main Changes

1. Page Meta Configuration

The main change between Nuxt 2 → Nuxt 3 is that you will define your color mode at the page level with definePageMeta:

<template>
  <h1>This page is forced with light mode</h1>
</template>

- <script>
- export default {
-   colorMode: 'light',
- }
+ <script setup>
+ definePageMeta({
+   colorMode: 'light',
+ })
</script>

2. Composable API

The $colorMode helper remains the same, but there is also a new composable (useColorMode) which is the recommended way of accessing color mode information.

<script setup>
const colorMode = useColorMode()

// Access properties
console.log(colorMode.preference)
console.log(colorMode.value)
</script>

3. Type Imports

If you were directly importing color mode configuration types, note that this has been renamed to ModuleOptions.

// Before
import type { ColorModeConfig } from '@nuxtjs/color-mode'

// After
import type { ModuleOptions } from '@nuxtjs/color-mode'