Packages

phia_ui

0.1.13
0.1.17 0.1.16 0.1.15 0.1.14 0.1.13 0.1.12 0.1.11 0.1.7 0.1.6 0.1.5 0.1.4 0.1.3 0.1.2 0.1.1

shadcn/ui-inspired component library for Phoenix LiveView with eject-based distribution. CSS-first theme system, 829 components across 20+ categories — Calendar, Chart, Animation, DnD, Editor, Collaboration, Typography, Navigation, Background, Surface, and more.

HexDocs

Current section

Files

Jump to
Readme
14 Versions
2 Dependencies
Dependants
Files
Activity
phia_ui priv templates components display dark_mode_toggle.ex.eex
Raw

priv/templates/components/display/dark_mode_toggle.ex.eex 

defmodule <%= @module_name %>.Components.UI.DarkModeToggle do

  @moduledoc """

  Dark mode toggle component with PhiaDarkMode vanilla JS hook.



  Ejected from PhiaUI — you own this copy. Customise freely.



  ## Example



      <.dark_mode_toggle id="theme-toggle" />



  ## Anti-FOUC (add to <head> before stylesheets)



      <script>

        (function() {

          var t = localStorage.getItem('phia-theme');

          if (t === 'dark' || (!t && matchMedia('(prefers-color-scheme: dark)').matches)) {

            document.documentElement.classList.add('dark');

          }

        })();

      </script>



  ## Hook setup



      import PhiaDarkMode from "./hooks/dark_mode"

      let liveSocket = new LiveSocket("/live", Socket, {

        hooks: { PhiaDarkMode }

      })

  """



  use Phoenix.Component

  import <%= @module_name %>.ClassMerger, only: [cn: 1]

  import <%= @module_name %>.Components.UI.Icon, only: [icon: 1]



  attr :id, :string, required: true, doc: "Unique ID for the toggle button"

  attr :class, :string, default: nil, doc: "Additional CSS classes"

  attr :rest, :global



  def dark_mode_toggle(assigns) do

    ~H"""

    <button

      id={@id}

      type="button"

      phx-hook="PhiaDarkMode"

      aria-label="Switch to dark mode"

      class={cn([

        "inline-flex h-9 w-9 items-center justify-center rounded-md",

        "border border-transparent text-sm transition-colors",

        "hover:bg-accent hover:text-accent-foreground",

        "focus:outline-none focus:ring-1 focus:ring-ring",

        @class

      ])}

      {@rest}

    >

      <%!-- Sun icon — visible in light mode, hidden in dark mode --%>

      <span class="block dark:hidden" aria-hidden="true">

        <.icon name="sun" size={:sm} />

      </span>

      <%!-- Moon icon — hidden in light mode, visible in dark mode --%>

      <span class="hidden dark:block" aria-hidden="true">

        <.icon name="moon" size={:sm} />

      </span>

      <span class="sr-only">Toggle theme</span>

    </button>

    """

  end

end