Dark theme using the same variable #15746
-
|
Any way to use the same variable overriding it value if dark exists in @import 'tailwindcss';
@custom-variant dark (&:is(.dark *));
@theme {
--breakpoint-sm: 320px;
--breakpoint-md: 640px;
--breakpoint-lg: 1000px;
--breakpoint-xl: 1600px;
/* colors */
--color-foreground: hsl(0 0% 13%);
--color-background: hsl(0 0% 100%);
--color-primary: hsl(40 80% 70%);
--color-primary-foreground: var(--color-foreground);
--color-primary-hover: hsl(40 82% 61%);
--color-disabled: hsl(233 5% 34%);
--color-disabled-foreground: var(--color-background);
}
@layer base {
.dark {
/* colors */
--color-foreground: hsl(0 0% 100%);
--color-background: hsl(274 59% 5%);
--color-disabled-foreground: var(--color-foreground);
}
}I was using |
Beta Was this translation helpful? Give feedback.
Replies: 3 comments 9 replies
-
|
Sorry, I don't quite understand the problem you are experiencing. Could you please elaborate more on the problem you are trying to solve? |
Beta Was this translation helpful? Give feedback.
-
|
I think he was asking how one can override base theme variable if a variant such as |
Beta Was this translation helpful? Give feedback.
-
|
I believe that's what they are doing already, if I am not mistaken. They have the |
Beta Was this translation helpful? Give feedback.
-
|
I have the same question, how can we override base theme variables for variants like dark-mode? |
Beta Was this translation helpful? Give feedback.
-
|
Pretty much like they showed above. If @theme inline {
…
} |
Beta Was this translation helpful? Give feedback.
-
|
Same question here. In the old Tailwind we could define CSS vars like this: root {
--color-primary: #ff0000;
.dark { /* Assuming using class for dark mode, but selector could be changed for data attributes, etc. if needed */
--color-primary: #660000;
}
}This meant that, with some changes to tailwind config, we could use this in out HTML like this: <div class="bg-primary size-5"></div>
<h2 class="text-primary">My heading</h2>
.. etc ..... and our themes would automatically adjust to dark mode. With the new |
Beta Was this translation helpful? Give feedback.
-
thanks that works just fine! 💜 |
Beta Was this translation helpful? Give feedback.
-
|
Awesome - this could do with being in the docs! |
Beta Was this translation helpful? Give feedback.
-
|
Thanks for this. It works for me when dark mode is enabled by CSS class, but not with @theme {
--color-primary: #ff0000;
}
@layer theme {
@media (prefers-color-scheme: dark) {
--color-primary: #660000;
}
}I'm still getting |
Beta Was this translation helpful? Give feedback.
-
|
You'd need a selector of some sort, like: @layer theme {
@media (prefers-color-scheme: dark) {
+ :root {
--color-primary: #660000;
+ }
}
} |
Beta Was this translation helpful? Give feedback.
-
|
Thank you, indeed now it works great! And I learned the hard way what |
Beta Was this translation helpful? Give feedback.
Same question here.
In the old Tailwind we could define CSS vars like this:
This meant that, with some changes to tailwind config, we could use this in out HTML like this:
... and our themes would automatically adjust to dark mode.
With the new
@theme { }way, how do we achieve the same?