Nuxt•4w ago

@nuxtjs/color-mode system css not using 'dark' class

In @nuxtjs/color-mode, for some reaso it's using "system-mode" as the class instead of "dark-mode" when that is what the system is set to (actually I want just "dark" so I set classSuffix to '' to fix that)

5 Replies

kapa.ai•4w ago

Hi @bnason. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- In Nuxt UI (and with the integrated @nuxtjs/color-mode module), you can control the class applied to the HTML element for color mode by using the classSuffix option. By default, @nuxtjs/color-mode appends -mode to the class (e.g., dark-mode, light-mode, system-mode). If you want the class to be just dark (not dark-mode), you should set classSuffix to an empty string in your configuration. Here’s how you can do it in your nuxt.config.ts:

export default defineNuxtConfig({
  modules: ['@nuxt/ui'],
  css: ['~/assets/css/main.css'],
  colorMode: {
    classSuffix: '', // This will use 'dark' instead of 'dark-mode'
    preference: 'dark', // Optional: set default preference
    fallback: 'dark',   // Optional: set fallback
  }
})

export default defineNuxtConfig({
  modules: ['@nuxt/ui'],
  css: ['~/assets/css/main.css'],
  colorMode: {
    classSuffix: '', // This will use 'dark' instead of 'dark-mode'
    preference: 'dark', // Optional: set default preference
    fallback: 'dark',   // Optional: set fallback
  }
})

This configuration ensures that when dark mode is active, the class dark will be applied to the HTML element, not dark-mode. This is the recommended way to control the class name for color mode in Nuxt UI and @nuxtjs/color-mode Getting-started > Installation > Options. If you are still seeing system-mode or other unexpected classes, double-check that your classSuffix is set to '' and that there are no overrides elsewhere in your configuration. Also, note that the system preference will apply the system-mode class unless you set the preference or force a specific mode Stack Overflow Post. If you want to always use dark mode, you can set preference: 'dark' and fallback: 'dark' as shown above. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4w ago

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

bnasonOP•4w ago

@kapa.ai I did that, but it should never apply a class of 'system', it should be either 'light' or 'dark'

kapa.ai•4w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- You're correct: ideally, the color mode class should only be light or dark, not system. According to the knowledge sources, the @nuxtjs/color-mode module (integrated with Nuxt UI) uses a classSuffix option to control the class name, and setting classSuffix: '' should result in just dark or light as the class, not system Getting-started > Installation > Options. However, the documentation and Stack Overflow discussions indicate that when the color mode is set to system, the module may apply a system or system-mode class to the HTML element. This is by design: if the user selects "system" mode, the class reflects that choice, and the actual theme (light or dark) is determined by the user's OS preference. There is no documented way in the provided sources to force the class to always be light or dark when the mode is set to system—unless you explicitly set the preference to light or dark, which will then apply only those classes Stack Overflow Post. If you want to guarantee that only light or dark is ever applied, you must avoid using the system mode and set the preference directly to either light or dark. There is no mention in the knowledge sources of a built-in way to have the system mode automatically resolve to light or dark class names only. Summary:
- Setting classSuffix: '' gives you dark or light classes, but if the mode is system, you may still get system as a class. - To avoid the system class, set preference: 'dark' or preference: 'light' in your config. - There is no documented way in the sources to have system mode always resolve to only light or dark classes. If you need more granular control, you may need to implement a custom solution, but the knowledge sources do not provide details on this. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4w ago

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

Gaming

Programming

@nuxtjs/color-mode system css not using 'dark' class

Did you find this page helpful?