@doc """ Button to switch dark/light/system color scheme """ def color_scheme_switcher(assigns) do ~H""" <.button phx-click={JS.dispatch("toggle-color-scheme")} aria-label="toggle color scheme"> <.icon name="hero-computer-desktop" class="hidden color-scheme-system:inline-block" aria-label="system selected" /> <.icon name="hero-moon" class="hidden color-scheme-dark:inline-block" aria-label="dark selected" /> <.icon name="hero-sun" class="hidden color-scheme-light:inline-block" aria-label="light selected" /> """ end @doc """ Javascript to manage switching color schemes with `color_scheme_switcher/1`. > #### Note: {: .info} > > This needs to be added in the page's head before `app.js` to prevent FOUC: ```heex <%# root.html.heex %> <.color_scheme_switcher_js /> """ end