Current section
Files
Jump to
Current section
Files
lib/skua/components/theme.ex
defmodule Skua.Components.Theme do
@moduledoc """
A dark/light theme toggle.
<.theme_toggle />
The `SkuaTheme` hook flips `data-theme` on `<html>` between `dark` and
`light`, persists the choice to `localStorage`, and applies it on mount.
Skua ships dark-first; the light token set lives in `assets/css/skua.css`
under `:root[data-theme="light"]`, so toggling re-skins every component with
no per-component work.
To avoid a flash of the wrong theme on first paint, the installer also adds a
tiny pre-paint script to the root layout; without it the toggle still works,
it just settles a frame after load.
"""
use Phoenix.Component
attr :class, :any, default: nil
attr :rest, :global
def theme_toggle(assigns) do
~H"""
<button
type="button"
id="sk-theme-toggle"
role="switch"
aria-checked="false"
class={["sk-switch sk-theme-switch sk-focusable", @class]}
phx-hook="SkuaTheme"
aria-label="Toggle light mode"
{@rest}
>
<span class="sk-thumb">
<svg class="sk-glyph sk-theme-sun" viewBox="0 0 24 24" aria-hidden="true">
<circle cx="12" cy="12" r="4" />
<path d="M12 3v1.5M12 19.5V21M5.6 5.6l1 1M17.4 17.4l1 1M3 12h1.5M19.5 12H21M5.6 18.4l1-1M17.4 6.6l1-1" />
</svg>
<svg class="sk-glyph sk-theme-moon" viewBox="0 0 24 24" aria-hidden="true">
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
</svg>
</span>
</button>
"""
end
end