The dark variant is not correctly applied when setting a custom variant

[skyecodes]

I'm using the following custom variant for dark:

@import "tailwindcss";
@import "@catppuccin/tailwindcss/mocha.css";
@custom-variant dark (&:where(.dark, .dark *));

Except when I apply the dark class to my html element, the Mocha colors do not apply, and the Latte colors are still applied as if the class wasn't taken into account. After looking into the generated CSS, it looks like this:

@layer base {
  :root {
    /* Latte colors */
  }
  @variant dark {
    :root {
      /* Mocha colors */
    }
  }
  /* Custom theme classes */
}

The issue is that :root is not a child of my dark custom variant definition, they are the same element, but the selector does not apply. For example, something like this works:

@layer base {
  :root {
    /* Latte colors */
  }
  @variant dark {
    &:root {
      /* Mocha colors */
    }
  }
  /* Custom theme classes */
}

I'm just getting started on Tailwind so maybe there's a workaround that I don't know of. Any ideas?

[lotap]

I ran into the same issue, the easiest workaround was to apply the .mocha class at the same time as .dark to my html element and .latte at the same time as .light

If you use cva, it looks like this:

const documentVariants = cva({
	base: 'h-full',
	variants: {
		themeResolved: {
			dark: 'dark mocha',
			light: 'light latte',
		},
	},
})