[Bug]: Tailwind color export base color and dark theme color beeing same
Opened this issue · 4 comments
Is there an existing issue for this?
- 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
Hi there. This has been updated. Check it out.
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.
@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.
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: