From 820be3cb78a77563807a41fe5052870d9b2f4afd Mon Sep 17 00:00:00 2001
From: Nathan Shafer <nate@lotech.org>
Date: Wed, 20 Aug 2025 11:10:58 -0700
Subject: [PATCH 1/2] Use a gray color for secondary instead of the same as
 primary.

---
 installer/templates/phx_assets/app.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/installer/templates/phx_assets/app.css b/installer/templates/phx_assets/app.css
index 0c52f5c4fe..904c13cb22 100644
--- a/installer/templates/phx_assets/app.css
+++ b/installer/templates/phx_assets/app.css
@@ -32,7 +32,7 @@
   --color-base-content: oklch(97.807% 0.029 256.847);
   --color-primary: oklch(58% 0.233 277.117);
   --color-primary-content: oklch(96% 0.018 272.314);
-  --color-secondary: oklch(58% 0.233 277.117);
+  --color-secondary: oklch(50% 0.02 277.117);
   --color-secondary-content: oklch(96% 0.018 272.314);
   --color-accent: oklch(60% 0.25 292.717);
   --color-accent-content: oklch(96% 0.016 293.756);

From ebbce3035b0af284bdcd4beef0bf0f220f2c001d Mon Sep 17 00:00:00 2001
From: Nathan Shafer <nate@lotech.org>
Date: Wed, 20 Aug 2025 11:22:10 -0700
Subject: [PATCH 2/2] Fix tailwind `dark:` variants, allow easy theme
 customization

---
 installer/templates/phx_assets/app.css        | 10 +++++---
 .../templates/phx_web/components/layouts.ex   |  2 +-
 .../phx_web/components/layouts/root.html.heex | 23 ++++++++++++++++---
 3 files changed, 28 insertions(+), 7 deletions(-)

diff --git a/installer/templates/phx_assets/app.css b/installer/templates/phx_assets/app.css
index 904c13cb22..4c9aa514d5 100644
--- a/installer/templates/phx_assets/app.css
+++ b/installer/templates/phx_assets/app.css
@@ -15,6 +15,10 @@
    Make sure to look at the daisyUI changelog: https://daisyui.com/docs/changelog/ */
 @plugin "../vendor/daisyui" {
   themes: false;
+  /* Uncomment to include specific built-in themes or all themes. Then remove the custom
+     themes below and update "layouts/root.html.heex" to select which themes to use. */
+  /* themes: corporate --default, business --prefersdark; */
+  /* themes: all; */
 }
 
 /* daisyUI theme plugin. You can update this file by fetching the latest version with:
@@ -22,7 +26,7 @@
   We ship with two themes, a light one inspired on Phoenix colors and a dark one inspired
   on Elixir colors. Build your own at: https://daisyui.com/theme-generator/ */
 @plugin "../vendor/daisyui-theme" {
-  name: "dark";
+  name: "elixir-dark";
   default: false;
   prefersdark: true;
   color-scheme: "dark";
@@ -57,7 +61,7 @@
 }
 
 @plugin "../vendor/daisyui-theme" {
-  name: "light";
+  name: "phoenix-light";
   default: true;
   prefersdark: false;
   color-scheme: "light";
@@ -97,7 +101,7 @@
 @custom-variant phx-change-loading (.phx-change-loading&, .phx-change-loading &);
 
 /* Use the data attribute for dark mode  */
-@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));
+@custom-variant dark (&:where([data-phx-theme*=dark], [data-phx-theme*=dark] *));
 
 /* Make LiveView wrapper divs transparent for layout */
 [data-phx-session], [data-phx-teleported-src] { display: contents }
diff --git a/installer/templates/phx_web/components/layouts.ex b/installer/templates/phx_web/components/layouts.ex
index 4f61eddd4a..8cea7a8943 100644
--- a/installer/templates/phx_web/components/layouts.ex
+++ b/installer/templates/phx_web/components/layouts.ex
@@ -123,7 +123,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-phx-theme=light]_&]:left-1/3 [[data-phx-theme=dark]_&]:left-2/3 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 b/installer/templates/phx_web/components/layouts/root.html.heex
index 1a57c4899b..aecd736c75 100644
--- a/installer/templates/phx_web/components/layouts/root.html.heex
+++ b/installer/templates/phx_web/components/layouts/root.html.heex
@@ -13,16 +13,33 @@
     </script><%= if @css do %>
     <script>
       (() => {
+        // Configure the desired themes. Must be loaded in "assets/css/app.css".
+        const lightTheme = "phoenix-light";
+        const darkTheme = "elixir-dark";
+
+        const prefersDarkMatch = window.matchMedia("(prefers-color-scheme: dark)");
+        const setSystemTheme = () => {
+          if (prefersDarkMatch.matches) {
+            document.documentElement.setAttribute("data-phx-theme", "system-dark");
+            document.documentElement.setAttribute("data-theme", darkTheme);
+          } else {
+            document.documentElement.setAttribute("data-phx-theme", "system-light");
+            document.documentElement.setAttribute("data-theme", lightTheme);
+          }
+        }
         const setTheme = (theme) => {
           if (theme === "system") {
             localStorage.removeItem("phx:theme");
-            document.documentElement.removeAttribute("data-theme");
+            prefersDarkMatch.addEventListener("change", setSystemTheme);
+            setSystemTheme();
           } else {
             localStorage.setItem("phx:theme", theme);
-            document.documentElement.setAttribute("data-theme", theme);
+            prefersDarkMatch.removeEventListener("change", setSystemTheme);
+            document.documentElement.setAttribute("data-phx-theme", theme);
+            document.documentElement.setAttribute("data-theme", theme === "light" ? lightTheme : darkTheme);
           }
         };
-        if (!document.documentElement.hasAttribute("data-theme")) {
+        if (!document.documentElement.hasAttribute("data-phx-theme")) {
           setTheme(localStorage.getItem("phx:theme") || "system");
         }
         window.addEventListener("storage", (e) => e.key === "phx:theme" && setTheme(e.newValue || "system"));