Nuxt•3mo ago

Nuxt ui v4 disable dark mode?

Hi How can i disable the dark mode? I tried @custom-variant dark (&:where(.dark, .dark *)); in my main.css But not working. I still have darkmode enabled in my form fields. Any way this is possible?

3 Replies

kapa.ai•3mo ago

Hi @funkyj8157. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To disable dark mode in Nuxt UI v4, you should disable the color mode integration provided by Nuxt UI. This is done via the configuration, not by overriding CSS. For a Nuxt project, set the colorMode option to false in your nuxt.config.ts:

export default defineNuxtConfig({
  modules: ['@nuxt/ui'],
  css: ['~/assets/css/main.css'],
  ui: {
    colorMode: false
  }
})

export default defineNuxtConfig({
  modules: ['@nuxt/ui'],
  css: ['~/assets/css/main.css'],
  ui: {
    colorMode: false
  }
})

This will disable the automatic registration of the @nuxtjs/color-mode module, and your app will no longer respond to dark mode changes. All components, including form fields, will remain in light mode regardless of system or user preference. You do not need to use custom CSS for this purpose—configuration is the recommended approach Nuxt UI Color Mode Integration. If you are using Nuxt UI with Vue (not full Nuxt), set colorMode: false in your vite.config.ts:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      colorMode: false
    })
  ]
})

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      colorMode: false
    })
  ]
})

Nuxt UI Color Mode Integration (Vue) Summary:
Disabling dark mode is done via the colorMode: false config option, not by CSS overrides. This will ensure your app and all Nuxt UI components stay in light mode. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3mo ago

<@587229444641521689> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

funkyj8157OP•3mo ago

i tried this. seems to work. Maybe docs can be improved a bit about this? Since dark is not a color? And colormode i thought it was about a feature to toggle between light and dark.

Gaming

Programming

Nuxt ui v4 disable dark mode?

Did you find this page helpful?