Dark mode with class does not work #101

Mangor1no · 2023-10-31T08:56:47Z

Action: Set darkMode to class in tailwind.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 Tailwind addBase 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:

Mangor1no · 2023-10-31T09:43:06Z

For some reason, the addBase function does not generate css with .dark, but it can generates when switching from class name to dataset properties.

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 [className] to [data-theme="dark"] will work

    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
        }
      });
    }

kasperkristensen · 2023-10-31T10:24:48Z

Hi @Mangor1no, I can't replicate your issue, and using the .dark class is how we manage the darkmode of docs.medusajs.com/ui. When you set darkMode: "class" in your tailwind config, you need to set the .dark class at the top of your HTML. To give a very simple demonstration of how it works see this:

"use client";

import { Button } from "@medusajs/ui";
import { useState } from "react";

export function ThemeButton() {
  const [mode, setMode] = useState<"light" | "dark">("light");

  return (
    <div className={mode}>
      <Button
        onClick={() => {
          setMode(mode === "light" ? "dark" : "light");
        }}
      >
        Hello!
      </Button>
    </div>
  );
}

Screen.Recording.2023-10-31.at.11.23.19.mov

Mangor1no · 2023-10-31T10:35:19Z

Thank you for the response @kasperkristensen . I do have .dark class at the top of the <html> tag. However, it doesn't seem like tailwind bother to generate the base style with .dark class. Here's how I'm testing it:

I install @medusa/ui and @medusa/ui-preset latest version
I setup the tailwind config with @medusa/ui-preset and add './node_modules/@medusajs/ui/dist/**/*.{js,jsx,ts,tsx}' to the content property.
I add the .dark class to <html> tag.
I proceed to run Tailwind build command: npx tailwindcss -i ./src/input.css -o ./dist/output.css to see if the .dark class generate CSS colors and effects variables of MedusaUI. Nothing show up.
I install patch-package and patch the @medusa/ui-package like I have described above.
I remove the .dark class add add data-theme="dark" to <html> tag.
I rerun Tailwind build command: npx tailwindcss -i ./src/input.css -o ./dist/output.css. Now Tailwind generate the CSS variables with [data-theme="dark"]

Also, MedusaUI documentation dark theme is using data-theme, not .dark class. Maybe Tailwind version is the reason? I'm on [email protected]

kasperkristensen · 2023-10-31T12:09:39Z

@Mangor1no Okay it used to use .dark when I originally build it, but I guess it was switched out when it got moved into the core docs project.

The issue is properly that the Tailwind CLI sees the .dark class on html which is the same as :root and decided it does not need to generate the dark classes as it deems that :root takes precedence. I can't tell you why that is, and it works fine adding it to html when using postcss at least on my end. But perhaps you could try adding the .dark class at a lower point in the tree such as body or a main tag, that way the Tailwind CLI should see that it needs to generate the .dark class.

Mangor1no · 2023-10-31T18:21:51Z

Thanks @kasperkristensen, after tried to reproduce the issue on my Windows PC, it did not appear and the dark class at <html> tag worked as intended. Not sure why it happened on my Macbook, but when I restarted the machine it also worked. Really confusing 🥲 Sorry for bother you and the team, I will close this issue.

Mangor1no closed this as completed Oct 31, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Dark mode with class does not work #101

Dark mode with class does not work #101

Mangor1no commented Oct 31, 2023

Mangor1no commented Oct 31, 2023

kasperkristensen commented Oct 31, 2023 •

edited

Mangor1no commented Oct 31, 2023 •

edited

kasperkristensen commented Oct 31, 2023 •

edited

Mangor1no commented Oct 31, 2023 •

edited

Dark mode with class does not work #101

Dark mode with class does not work #101

Comments

Mangor1no commented Oct 31, 2023

Mangor1no commented Oct 31, 2023

kasperkristensen commented Oct 31, 2023 • edited

Mangor1no commented Oct 31, 2023 • edited

kasperkristensen commented Oct 31, 2023 • edited

Mangor1no commented Oct 31, 2023 • edited

kasperkristensen commented Oct 31, 2023 •

edited

Mangor1no commented Oct 31, 2023 •

edited

kasperkristensen commented Oct 31, 2023 •

edited

Mangor1no commented Oct 31, 2023 •

edited