From 64354d4e97d99d132b37c39300052b76e726007c Mon Sep 17 00:00:00 2001
From: Steffen Deusch <steffen@deusch.me>
Date: Wed, 6 May 2026 16:17:40 +0200
Subject: [PATCH] Ensure Tailwind dark: variant works with system theme

Closes https://github.com/phoenixframework/phoenix/issues/6433.
Closes https://github.com/phoenixframework/phoenix/pull/6432.
---
 .../templates/phx_web/components/layouts.ex.eex      |  2 +-
 .../phx_web/components/layouts/root.html.heex.eex    | 12 +++++++++++-
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/installer/templates/phx_web/components/layouts.ex.eex b/installer/templates/phx_web/components/layouts.ex.eex
index df3ccfa7fa..1a7d568533 100644
--- a/installer/templates/phx_web/components/layouts.ex.eex
+++ b/installer/templates/phx_web/components/layouts.ex.eex
@@ -129,7 +129,7 @@ defmodule <%= @web_namespace %>.Layouts do
   def theme_toggle(assigns) do
     ~H"""
     <div class="card relative flex flex-row items-center border-2 border-base-300 bg-base-300 rounded-full">
-      <div class="absolute w-1/3 h-full rounded-full border-1 border-base-200 bg-base-100 brightness-200 left-0 [[data-theme=light]_&]:left-1/3 [[data-theme=dark]_&]:left-2/3 transition-[left]" />
+      <div class="absolute w-1/3 h-full rounded-full border-1 border-base-200 bg-base-100 brightness-200 left-0 [[data-theme=light]_&]:left-1/3 [[data-theme=dark]_&]:left-2/3 [[data-theme-source=system]_&]:!left-0 transition-[left]" />
 
       <button
         class="flex p-2 cursor-pointer w-1/3"<%= if @live do %>
diff --git a/installer/templates/phx_web/components/layouts/root.html.heex.eex b/installer/templates/phx_web/components/layouts/root.html.heex.eex
index e2ac3f4587..6c00eb7c13 100644
--- a/installer/templates/phx_web/components/layouts/root.html.heex.eex
+++ b/installer/templates/phx_web/components/layouts/root.html.heex.eex
@@ -11,13 +11,17 @@
     </script><%= if @css do %>
     <script>
       (() => {
+        const systemTheme = () => matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+
         const setTheme = (theme) => {
           if (theme === "system") {
             localStorage.removeItem("phx:theme");
-            document.documentElement.removeAttribute("data-theme");
+            document.documentElement.setAttribute("data-theme", systemTheme());
+            document.documentElement.setAttribute("data-theme-source", "system");
           } else {
             localStorage.setItem("phx:theme", theme);
             document.documentElement.setAttribute("data-theme", theme);
+            document.documentElement.setAttribute("data-theme-source", "user");
           }
         };
         if (!document.documentElement.hasAttribute("data-theme")) {
@@ -35,6 +39,12 @@
             })
         })<% else %>
         window.addEventListener("phx:set-theme", (e) => setTheme(e.target.dataset.phxTheme));<% end %>
+
+        matchMedia("(prefers-color-scheme: dark)").addEventListener("change", (e) => {
+          if (document.documentElement.getAttribute("data-theme-source") === "system") {
+            document.documentElement.setAttribute("data-theme", systemTheme());
+          }
+        });
       })();
     </script><% end %>
   </head>