-
-
Notifications
You must be signed in to change notification settings - Fork 19
Dark mode with class does not work #101
Comments
For some reason, the For example, this current lines won't work: const [darkMode, className = ".dark"] = [].concat(
config("darkMode", "media")
);
// .....
if (darkMode === "class") {
addBase({
[className]: { ...colors.dark, ...effects.dark }
});
} else {
addBase({
"@media (prefers-color-scheme: dark)": {
":root": { ...colors.dark, ...effects.dark },
...components.dark
}
});
} Changing const [darkMode, className = ".dark"] = [].concat(
config("darkMode", "media")
);
// .....
if (darkMode === "class") {
addBase({
'[data-theme="dark"]': { ...colors.dark, ...effects.dark }
});
} else {
addBase({
"@media (prefers-color-scheme: dark)": {
":root": { ...colors.dark, ...effects.dark },
...components.dark
}
});
} |
Hi @Mangor1no, I can't replicate your issue, and using the
Screen.Recording.2023-10-31.at.11.23.19.mov |
Thank you for the response @kasperkristensen . I do have
Also, MedusaUI documentation dark theme is using |
@Mangor1no Okay it used to use The issue is properly that the Tailwind CLI sees the |
Thanks @kasperkristensen, after tried to reproduce the issue on my Windows PC, it did not appear and the |
Action: Set
darkMode
toclass
intailwind.config.js
file.Expected result: CSS variables should be dark variants.
Actual result: Nothing change, the page is kept on light mode.
I've narrowed down the problem to line 28 of the
plugin.ts
file in the@medusa/ui-package
source code. Maybe something is wrong here with the TailwindaddBase
function usage since the line 32 which use@media (prefers-color-scheme: dark)
is still working fine.The text was updated successfully, but these errors were encountered: