Using other flavours inside an element that already contains a flavour seems to break the default flavour.

[sophiiss]

Title may have been confusing, so I'll show an example.

Suppose you have the defaultFlavour set to 'latte' and the class 'ctp-latte' on your body element. Now picture this theme picker:

It seems fine when the selected flavour is the default one. But when I change it to another one, Mocha for example:

It adopts the colors from the current flavour instead of keeping its own colors, even when its class is set to 'ctp-latte'. The code for each flavour demo is basically this:

<div className='ctp-{flavor}'>
  // flavour name and demo colors
</div>

And I'm setting the global theme on the wrapping div on App.tsx (I'm using React). Hope you understand my explanation :)

[nekowinston]

Oh, apologies for not commenting on this earlier, I will check it out this weekend.

[nekowinston]

I believe I have identified a possible issue, could you please give the following settings a shot? Try setting the defaultFlavour to ""

  plugins: [require("@catppuccin/tailwindcss")({
      defaultFlavour: "",
  })],

This will make the :root unset, which can cause some hierarchy issues with how classes are being applied.

Please let me know if this helps at all, I will investigate further.

[sophiiss]

Yes, leaving the defaultFlavour blank worked!

[nekowinston]

Great! 🎉 Not setting the defaultFlavour should probably be the default setting, so that:

  plugins: [require("@catppuccin/tailwindcss")],

Doesn't manipulate the :root.

I will adjust the defaults for the plugin, and notify users about a somewhat breaking change in that regard. Thanks a lot for helping me figure this out! 👍

(I will also include an update regarding #2, making Mocha the default previews until a better solution is found.)

[sophiiss]

That's awesome! Thank you for your time 😊