How to disable @nuxtjs/color-mode

[babalugats76]

Description

Best I can tell, @nuxtjs/color-mode is installed as a dependency of Nuxt/UI.

I have been struggling to disable this for some time. I have tried different methods, cleared out Application > Storage in my browser, etc., and no matter what I do, I can't seem to figure out whether this is possible and/or what are the correct entries to app.config.ts or nuxt.config.ts.

If anyone could help that would be incredible!

[HugoRCD]

@babalugats76 You can disable color-mode in your nuxt.config.ts:

export default defineNuxtConfig({
  ui: {
    colorMode: false
  }
})

[HugoRCD]

Ah, but maybe you're talking about v2?

[babalugats76]

Thanks, @HugoRCD! I am on Version 2. I could have swore I tried that to no avail, but I can try again.

[HugoRCD]

@babalugats76 So no it won't work what I sent you was for v3 😅

[HugoRCD]

@babalugats76 color-mode can't be disabled on version 2 but tell me why you want to disable it and I might be able to help!

[babalugats76]

@HugoRCD. Thank you, that was driving me nuts. In my use case, I am building a dark site in which color mode doesn't really apply. I just don't want light or dark as a preference applied at all. I just want to build a site without any additional classes placed upon the root/html element.

For now, I have this in my nuxt.config.ts:

  colorMode: {
    preference: 'dark',
    fallback: 'dark',
    classSuffix: '',
  },

and these additions to my tailwind.config.ts:

  darkMode: 'class', // Enable dark mode using the 'class' strategy

variants: {
    extend: {
      backgroundColor: ['dark', 'dark:hover', 'dark:focus'],
      textColor: ['dark', 'dark:hover', 'dark:focus'],
      borderColor: ['dark', 'dark:hover', 'dark:focus'],
      placeholderColor: ['dark'],
      ringColor: ['dark'],
      divideColor: ['dark'],
    },
  },

So, basically, I am forcing dark in all the tooling, which can be a pain.

There is probably a better way, huh :) Setting color modes on the root can affect other tooling, e.g., Formkit, etc., in a perfect world, we would be able to remove.

I guess the way I am approaching it, for now, is to force dark and write the site that way and then perhaps I will add a selector to the site that will let the user choose at a later time? I don't want system preference. Hope that makes sense.

[babalugats76]

All the above notwithstanding, we should still be able to use Nuxt/UI, disable color-mode, and simply place this in the config at our discretion:

  // app: {
  //   head: {
  //     htmlAttrs: {
  //       class: 'dark'
  //     }
  //   }
  // },

[HugoRCD]

@babalugats76 I'll see if it's possible to make the module optional on v2, but if not, isn't simply forcing darkmode on a layout or app.vue level enough?

definePageMeta({
  colorMode: 'dark',
})

[babalugats76]

@HugoRCD Thanks again for the support. I tried that too, and, unfortunately, that is disallowed as well. Guess the page meta has to be applied on a page-by-page basis.

[benjamincanac]

Did you check https://ui.nuxt.com/getting-started/theming#dark-mode? You can force the colorMode.preference in your nuxt.config.ts.

[babalugats76]

@benjamincanac Thanks for the support! Yes, I did check that and you can see above where I am applying that. I would rather the code not run at all, if that makes any sense.