From cc6dfab88906194396ce577969f043293fbfe33b Mon Sep 17 00:00:00 2001
From: Graham McIntire <graham@mcintire.me>
Date: Fri, 13 Mar 2026 16:51:33 -0500
Subject: [PATCH] Move theme toggle from header to user settings
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Remove the theme toggle dropdown from the nav bar and its component
definition. Theme selection already exists in Account Settings → Personal.
---
 lib/towerops_web/components/layouts.ex | 71 --------------------------
 1 file changed, 71 deletions(-)
diff --git a/lib/towerops_web/components/layouts.ex b/lib/towerops_web/components/layouts.ex
index 43f33526..8f89c558 100644
--- a/lib/towerops_web/components/layouts.ex
+++ b/lib/towerops_web/components/layouts.ex
@@ -252,9 +252,6 @@ defmodule ToweropsWeb.Layouts do
               <.icon name="hero-question-mark-circle" class="h-5 w-5" />
             </.link>
             
-    <!-- Theme toggle -->
-            <.theme_toggle />
-            
     <!-- User menu -->
             <button
               type="button"
@@ -816,74 +813,6 @@ defmodule ToweropsWeb.Layouts do
     """
   end
 
-  @doc """
-  Provides dark vs light theme toggle based on themes defined in app.css.
-
-  See <head> in root.html.heex which applies the theme before page load.
-  """
-  def theme_toggle(assigns) do
-    ~H"""
-    <div class="relative" id="theme-toggle" phx-update="ignore">
-      <button
-        type="button"
-        id="theme-menu-button"
-        aria-expanded="false"
-        aria-haspopup="true"
-        aria-controls="theme-menu"
-        phx-click={
-          JS.toggle(to: "#theme-menu")
-          |> JS.toggle_attribute({"aria-expanded", "true", "false"}, to: "#theme-menu-button")
-        }
-        class="flex items-center justify-center p-2 rounded-md text-gray-500 hover:text-gray-700 hover:bg-gray-100 dark:text-gray-400 dark:hover:text-gray-200 dark:hover:bg-gray-800"
-        aria-label="Toggle theme"
-      >
-        <.icon name="hero-sun" class="size-5 block dark:hidden" />
-        <.icon name="hero-moon" class="size-5 hidden dark:block" />
-      </button>
-
-      <div
-        id="theme-menu"
-        role="menu"
-        class="hidden absolute top-full right-0 mt-2 w-36 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black/5 z-50 dark:bg-gray-800 dark:ring-white/10"
-        phx-click-away={
-          JS.hide(to: "#theme-menu")
-          |> JS.set_attribute({"aria-expanded", "false"}, to: "#theme-menu-button")
-        }
-      >
-        <div class="py-1">
-          <button
-            type="button"
-            role="menuitem"
-            class="flex w-full items-center gap-2 px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700"
-            phx-click={JS.dispatch("phx:set-theme") |> JS.hide(to: "#theme-menu")}
-            data-phx-theme="system"
-          >
-            <.icon name="hero-computer-desktop" class="size-4" /> Auto
-          </button>
-          <button
-            type="button"
-            role="menuitem"
-            class="flex w-full items-center gap-2 px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700"
-            phx-click={JS.dispatch("phx:set-theme") |> JS.hide(to: "#theme-menu")}
-            data-phx-theme="light"
-          >
-            <.icon name="hero-sun" class="size-4" /> Light
-          </button>
-          <button
-            type="button"
-            role="menuitem"
-            class="flex w-full items-center gap-2 px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700"
-            phx-click={JS.dispatch("phx:set-theme") |> JS.hide(to: "#theme-menu")}
-            data-phx-theme="dark"
-          >
-            <.icon name="hero-moon" class="size-4" /> Dark
-          </button>
-        </div>
-      </div>
-    </div>
-    """
-  end
-
   @doc """
   Renders the admin layout.
 
