`dark` variant not applied when using system mode

[zimt28]

Environment

• Phoenix version (mix deps): 1.8.0

Actual behavior

Using the dark prefix doesn't work when the selected theme is system. Selecting dark adds the data-theme="dark" attribute to the document and

@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));

applies it. When the system switches to dark mode and the selected theme is not dark, Tailwind doesn't apply the variant as it doesn't know the color mode has changed:

Now instead of dark:* utilities being applied based on prefers-color-scheme, they will be applied whenever the dark class is present earlier in the HTML tree

from Tailwind docs

Expected behavior

Using the system theme should pick up dark mode.

[Gazler]

It is possible to support this with something like this:

      (() => {
        const setTheme = (theme) => {
          if (theme === "system") {
            localStorage.removeItem("phx:theme");
            theme = window.matchMedia('(prefers-color-scheme: dark)').matches ? "dark" : "light";
            document.documentElement.setAttribute("data-theme", theme);
            document.documentElement.setAttribute("data-system-theme", true);
          } else {
            localStorage.setItem("phx:theme", theme);
            document.documentElement.setAttribute("data-theme", theme);
            document.documentElement.removeAttribute("data-system-theme");
          }
        };
        if (!document.documentElement.hasAttribute("data-theme")) {
          setTheme(localStorage.getItem("phx:theme") || "system");
        }
        window.addEventListener("storage", (e) => e.key === "phx:theme" && setTheme(e.newValue || "system"));
        window.addEventListener("phx:set-theme", (e) => setTheme(e.target.dataset.phxTheme));

        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
          if (document.documentElement.getAttribute("data-system-theme") === "true") {
            setTheme("system");
          }
        });
      })();

This keeps track of if the system theme is in use, and if it is, it'll respond to OS level theme changes, setting the data-theme attribute as appropriate.

It will require the following CSS change:

[[data-system-theme=true]_&]:left-0!

[zimt28]

I'm using something very similar at the moment:

  (() => {
    const setTheme = (theme) => {
      if (theme === "system") {
        localStorage.removeItem("phx:theme");
-       document.documentElement.removeAttribute("data-theme");
+       theme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+       document.documentElement.setAttribute("data-theme", "system:" + theme);
      } else {
        localStorage.setItem("phx:theme", theme);
        document.documentElement.setAttribute("data-theme", theme);
      }
    };
    if (!document.documentElement.hasAttribute("data-theme")) {
      setTheme(localStorage.getItem("phx:theme") || "system");
    }
    window.addEventListener("storage", (e) => e.key === "phx:theme" && setTheme(e.newValue || "system"));
    window.addEventListener("phx:set-theme", (e) => setTheme(e.target.dataset.phxTheme));
+   window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", () => {
+     document.documentElement.getAttribute("data-theme")?.startsWith("system") && setTheme("system");
+   });
  })();

- @custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));
+ @custom-variant dark (&:where([data-theme*=dark], [data-theme*=dark] *));

I thought/hoped this could be solved with some clever CSS instead of more JS code but couldn't figure out how, so I opened this issue instead of a PR.

[Gazler]

See also: #6432

[nshafer]

Another solution, proposed by @venir.dev on Discord, is this @custom-variant that works with the existing JS in Phoenix 1.8. The main con to this solution is bloat in the output app.css file, as it creates twice as many characters (after minifying) per each dark: variant used in the source code.

@custom-variant dark {
  &:where([data-theme=dark], [data-theme=dark] *) {
    @slot;
  }

  @media (prefers-color-scheme: dark) {
    &:not(:where([data-theme], [data-theme] *)) {
      @slot;
    }
  }
}