[Bug]: Tailwind color export base color and dark theme color beeing same

mez0ru commented 6 months ago

Is there an existing issue for this?

[X] I have searched the existing issues

Describe the bug

User @Vasu7777py reported the same bug a while back, and since I can't reopen the issue I made a new one, I noticed it got closed without actually being resolved! I researched through the github commits to see where it got fixed but I could not determine if it was actually fixed or not. However I'm currently encountring the same issue that was reported. And since I can't pull request the fix I hope it gets resolved.

Thanks.

Reproduction Steps

Create a color profile
Click on export with shades and theme flags turned on.
Toggle light theme/dark theme and notice the shades values stay the same for both light and dark themes.

Expected behavior

Different shades for light and dark theme. I would expect them to be flipped, for example if I want a strong black color I would use 950 in a light theme, but in a dark theme I want the value to be flipped, so it would be a strong white color.

Screenshots

No response

Device Info

OS: Windows 10 Browser: Edge Version: 122.0.2365.80

Additional context

No response

juxtopposed commented 6 months ago

Hi there. This has been updated. Check it out.

Lasoloz commented 6 months ago

~Hi @juxtopposed , I would also like to jump in, as I think the issue is still reproducible. Can you please check out these examples?~ ~- https://www.realtimecolors.com/?colors=e7e8fe-030630-f4c2ae-4c08a6-921af4&fonts=Poppins-Poppins~ ~- https://www.realtimecolors.com/?colors=e1d9fc-12101e-b594e5-4b3a47-fb6f90&fonts=Poppins-Poppins~

~The dark background color (RGB 3 6 48) is found in the tailwind CSS output in the first case. ~

~However. in the second example, the background color (RGB 18 16 30) is absent in the output.~

~Is it expected, that the dark mode color is off by a few shades? Should I use a different color function?~

~Thanks~

I realized my assumptions were wrong and how the shades are actually created.

mez0ru commented 6 months ago

@Lasoloz I think your bug is different from mine. In my case, I want the full shades to be flipped if the theme is light.

@juxtopposed Like i said, it's not. I just checked again, it's still reproducable. I don't think it's the intended behavior because the demo correctly represent the colors. But I won't be able to dynamically to change the theme from dark to light because the shades are identical.

Let me explain why this is an issue in the first place. I want to have multiple themes, both light and dark themes, however imagine that I have a button with tailwind class like this:

bg-primary-300

in a dark theme mode, I intend to make the button more darker, since it's a dark theme. but in a light theme version of the exact palette, I would have to change the code above to

bg-primary-700

because both dark and light themes are identical, this makes the whole light & dark theme meaningless, because I could just use hex codes or hardcoded colors to achive the exact same results. But I intend to make a dynamic theme switch with just one variable. The classes don't have to change to match the light / dark theme colors.

I hope I was clear with what i meant. Currently the dark & light shades are identical, making it extremely hard to make dynamic themes especially if I want light & dark themes of the same palette.

marcellocurto commented 5 months ago

Hi @mez0ru, I just tried it and it works for me as well. The colors go from bright (50) to dark (950), and inside the .dark class, they go from dark (50) to bright (950).

However, I don't think the .dark class is useful here. Instead of the dark class, it should rather overwrite :root with a @media (prefers-color-scheme: dark).

Like so:

@layer base {
  :root {
    --text: #01000f;
    --background: #dbdbdb;
    --primary: #ff57e9;
    --secondary: #a9a5fd;
    --accent: #a9ff1f;
  }
  @media (prefers-color-scheme: dark) {
    :root {
      --text: #f1f0ff;
      --background: #242424;
      --primary: #a80092;
      --secondary: #06025a;
      --accent: #8ae000;
    }
  }
}

You can test it here: https://play.tailwindcss.com/PoIHnogd7u?file=css

These are the colors as I get them back:

juxtopposed / realtimecolors