-
|
What version of Tailwind CSS are you using? 4.1.4 What build tool (or framework if it abstracts the build tool) are you using? postcss 8.5.3, Vite 6.0.6 What version of Node.js are you using? v22.12.0 What browser are you using? Chrome What operating system are you using? macOs Reproduction URL https://play.tailwindcss.com/BXi8aLntLb?file=css Describe your issue How to enable dark scheme with |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 16 replies
-
|
@layer base {
+ :root {
@variant dark {
--color-primary: blue;
}
+ }
}Conventionally, you may wish to consider adding it into the -@layer base {
+@layer theme {
:root { |
Beta Was this translation helpful? Give feedback.
-
The way we've already seen in the Tailwind Play.
See https://tailwindcss.com/docs/dark-mode#toggling-dark-mode-manually |
Beta Was this translation helpful? Give feedback.
-
|
Alright, thanks a lot! 👍 |
Beta Was this translation helpful? Give feedback.
-
|
@wongjn if i add the @custom-variant for dark it doesn't seem to work or am i missing something? |
Beta Was this translation helpful? Give feedback.
-
|
When adding the |
Beta Was this translation helpful? Give feedback.
-
|
Ok👍 It seems like the automatic switch for the last text (prefers-color-scheme) doesn't work in that case either so i would need to always set the light/dark class depending on the user preference? |
Beta Was this translation helpful? Give feedback.
-
|
Yes. |
Beta Was this translation helpful? Give feedback.
-
|
I would like to have a setup where the theme automatically switches depending on OS setting (preferes-colors-scheme) and also be able to force an element to use either light or dark mode. |
Beta Was this translation helpful? Give feedback.
-
|
See https://tailwindcss.com/docs/dark-mode#with-system-theme-support |
Beta Was this translation helpful? Give feedback.
When adding the
darkclass to another element other than<html>, you need to adjust things slightly: https://play.tailwindcss.com/NfHJaa5ky4?file=css or https://play.tailwindcss.com/PbuWWCJUBV?file=css