ui/docs/content/1.getting-started/7.color-mode.md

description, links, navigation

description	links	navigation
Nuxt UI integrates seamlessly with `@nuxtjs/color-mode`, offering effortless switching between light and dark themes.	label to target icon nuxtjs/color-mode https://github.com/nuxt-modules/color-mode _blank i-simple-icons-github	false

Usage

Nuxt UI automatically registers the @nuxtjs/color-mode module for you and takes advantage of Tailwind CSS dark mode class strategy, so there's no additional setup required.

You can disable dark mode by setting the preference to light instead of system in your nuxt.config.ts.

export default defineNuxtConfig({
  colorMode: {
    preference: 'light'
  }
})

::tip If you're stuck in dark mode even after changing this setting, you might need to remove the nuxt-color-mode entry from your browser's local storage. ::