tailwind module integration breaks dark mode

[stafyniaksacha]

Version

@nuxtjs/color-mode: 3.4.x nuxt: 3.11.x

Reproduction Link

https://stackblitz.com/edit/nuxt-color-mode-mxi4qf?file=app.vue

Steps to reproduce

• Set a custom class on html tag: this will make dark mode to fail
• Set dark-mode class to an element to force it children to be in dark mode
  • Adding another class to this element breaks dark mode

What is actually happening?

https://github.com/nuxt-modules/color-mode/blob/bd63b56415885fc791835521f53715c815f88850/src/module.ts#L75

What is Expected?

Adding other classes to root element should not break tailwind dark mode selector like &:is(.${options.classPrefix}dark${options.classSuffix} *) or [class~="${options.classPrefix}dark${options.classSuffix}"]

[jonathanwilke]

For some reason, since updating to 3.4, the dark mode didn't work either. When downgrading to 3.3.3 it works again.

[danielroe]

cc: @ineshbose

[ineshbose]

Yep - thanks for reporting this. Didn't factor this edge case where other classes could be given to the elements.

Only need to modify the selector to [class~="${prefix}dark${suffix}"]. It could've also been simply .${prefix}dark{suffix} and we wouldn't hit this issue, but it may break if prefix/suffix include a . character (which can be safely encoded, but I read that browser support varies). Opened #259 👍

[jonathanwilke]

I updated to 3.4.1 but for some reason the dark mode is still not working for me.

What was essentially changed in 3.4 that I can maybe check if it's a problem on my side?

[ineshbose]

What was essentially changed in 3.4 that I can maybe check if it's a problem on my side?

This would be it -

https://github.com/nuxt-modules/color-mode/pull/237

If you had any existing configuration, it's best you don't change that. If you want to remove the integration configuration before 3.4, the .dark classes would be changed to .dark-mode

[jonathanwilke]

Okay, I found my issue. I needed to explicitly set darkMode: 'class' in my tailwind.config.ts as I am using a monorepo structure and the preset seems to be overwritten somehow.

Also I am using https://github.com/mertasan/tailwindcss-variables for creating different color themes (incl. the dark theme). Not sure if it was because of this, but the above config change fixed it for me.

Thanks for answer though!

[ineshbose]

Okay, I found my issue. I needed to explicitly set darkMode: 'class' in my tailwind.config.ts as I am using a monorepo structure and the preset seems to be overwritten somehow.

The Tailwind module should've still been able to set this to your final merged config - unless there was a different approach in your project!