graham/towerops
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Move theme toggle from header to user settings

Browse source 
Remove the theme toggle dropdown from the nav bar and its component
definition. Theme selection already exists in Account Settings → Personal.
This commit is contained in:
Graham McIntire 2026-03-13 16:51:33 -05:00
parent 9104ad2948
commit cc6dfab889
No known key found for this signature in database
1 changed files with 0 additions and 71 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

71
lib/towerops_web/components/layouts.ex
View file

@ -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.