local-it/mitgliederverwaltung
2
3
Fork 0
Code Issues 51 Pull requests 13 Projects 1 Releases Packages 1 Activity Actions

feat (theme-toggle): replaced theme toggle with the one from daisy UI
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse source
This commit is contained in:
carla 2025-07-21 16:01:38 +02:00
parent ab81b29467
commit ed9616035b
4 changed files with 38 additions and 46 deletions
Download patch file Download diff file Expand all files Collapse all files

34
lib/mv_web/components/layouts.ex
View file

@ -86,38 +86,4 @@ defmodule MvWeb.Layouts do
</div>
"""
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="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]" />
<button
phx-click={JS.dispatch("phx:set-theme", detail: %{theme: "system"})}
class="flex p-2 cursor-pointer w-1/3"
>
<.icon name="hero-computer-desktop-micro" class="size-4 opacity-75 hover:opacity-100" />
</button>
<button
phx-click={JS.dispatch("phx:set-theme", detail: %{theme: "light"})}
class="flex p-2 cursor-pointer w-1/3"
>
<.icon name="hero-sun-micro" class="size-4 opacity-75 hover:opacity-100" />
</button>
<button
phx-click={JS.dispatch("phx:set-theme", detail: %{theme: "dark"})}
class="flex p-2 cursor-pointer w-1/3"
>
<.icon name="hero-moon-micro" class="size-4 opacity-75 hover:opacity-100" />
</button>
</div>
"""
end
end

34
lib/mv_web/components/layouts/navbar.ex
View file

@ -4,7 +4,6 @@ defmodule MvWeb.Layouts.Navbar do
"""
use Phoenix.Component
use Gettext, backend: MvWeb.Gettext
import MvWeb.Layouts
def navbar(assigns) do
~H"""
@ -24,7 +23,37 @@ defmodule MvWeb.Layouts.Navbar do
<option value="en" selected={Gettext.get_locale() == "en"}>English</option>
</select>
</form>
<.theme_toggle />
<!-- Daisy UI Theme Toggle for dark and light mode-->
<label class="flex cursor-pointer gap-2">
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<circle cx="12" cy="12" r="5" />
<path d="M12 1v2M12 21v2M4.2 4.2l1.4 1.4M18.4 18.4l1.4 1.4M1 12h2M21 12h2M4.2 19.8l1.4-1.4M18.4 5.6l1.4-1.4" />
</svg>
<input type="checkbox" value="dark" class="toggle theme-controller" />
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
</svg>
</label>
<div class="dropdown dropdown-end">
<div tabindex="0" role="button" class="btn btn-ghost btn-circle avatar avatar-placeholder">
<div class="bg-neutral text-neutral-content w-12 rounded-full">
@ -48,5 +77,4 @@ defmodule MvWeb.Layouts.Navbar do
</header>
"""
end
end