Rework theme toggle into a dropdown menu

Now it is possible to reset back to the system theme, rather than
toggling between light and dark without any ability to revert.

Author: sorentwo

.formatter.exs

@@ -5,9 +5,10 @@
     :ecto_sql,
     :phoenix
   ],
-  inputs: ["{mix,.formatter}.exs", "{config,lib,test}/**/*.{ex,exs}"],
+  inputs: ["{mix,.formatter}.exs", "{config,lib,test}/**/*.{ex,exs,heex}"],
   export: [
     locals_without_parens: [oban_dashboard: 1, oban_dashboard: 2]
   ],
-  locals_without_parens: [oban_dashboard: 1, oban_dashboard: 2]
+  locals_without_parens: [oban_dashboard: 1, oban_dashboard: 2],
+  plugins: [Phoenix.LiveView.HTMLFormatter]
 ]

assets/js/app.js

@@ -36,25 +36,38 @@ Hooks.ToggleRefresh = {
   }
 }
 
-Hooks.ToggleDarkMode = {
-  setMode() {
-    if (localStorage.theme === "dark" || (!("theme" in localStorage) && window.matchMedia("(prefers-color-scheme: dark)").matches)) {
+Hooks.RestoreTheme = {
+  mounted() {
+    this.pushEventTo("#theme-selector", "restore", {
+      theme: localStorage.getItem("theme")
+    })
+  }
+}
+
+Hooks.ChangeTheme = {
+  applyTheme() {
+    const wantsDark = window.matchMedia("(prefers-color-scheme: dark)").matches
+    const noPreference = !("theme" in localStorage)
+
+    if ((localStorage.theme === "dark") || (localStorage.theme === "system" && wantsDark) || (noPreference && wantsDark)) {
       document.documentElement.classList.add("dark")
     } else {
       document.documentElement.classList.remove("dark")
     }
   },
 
   mounted() {
+    let elem = this;
+
     this.el.addEventListener("click", _event => {
-      localStorage.theme = localStorage.theme === "dark" ? "light" : "dark";
+      const theme = this.el.getAttribute("value")
 
-      this.setMode();
-    })
+      localStorage.theme = theme
 
-    const content = this.el.getAttribute("data-title");
+      this.applyTheme()
 
-    tippy(this.el, { arrow: roundArrow, content: content, delay: [500, null] });
+      elem.pushEventTo("#theme-selector", "restore", {theme: theme})
+    })
   }
 }
 

assets/tailwind.config.js

@@ -22,8 +22,8 @@ module.exports = {
     colors: {
       transparent: "transparent",
       current: "currentColor",
-      black: "#000",
-      white: "#fff",
+      black: colors.black,
+      white: colors.white,
       blue: colors.sky,
       cyan: colors.cyan,
       gray: colors.gray,
@@ -34,7 +34,8 @@ module.exports = {
       red: colors.red,
       teal: colors.teal,
       violet: colors.violet,
-      yellow: colors.amber
+      yellow: colors.amber,
+      slate: colors.slate
     }
   },
   content: ["../lib/**/*.*ex"],

lib/oban/web.ex

@@ -45,6 +45,7 @@ defmodule Oban.Web do
       import Phoenix.LiveView.Helpers
 
       alias Phoenix.LiveView.JS
+      alias Oban.Web.Components.Icons
     end
   end
 

lib/oban/web/components/icons.ex

@@ -0,0 +1,78 @@
+defmodule Oban.Web.Components.Icons do
+  use Oban.Web, :live_component
+
+  attr :rest, :global, default: %{
+    "stroke-width": "1.5",
+    class: "w-6 h-6",
+    fill: "none",
+    stroke: "currentColor",
+    viewBox: "0 0 24 24"
+  }
+
+  slot :inner_block, required: true
+
+  defp svg_outline(assigns) do
+    ~H"""
+    <svg xmlns="http://www.w3.org/2000/svg" {@rest}>
+      <%= render_slot(@inner_block) %>
+    </svg>
+    """
+  end
+
+  attr :rest, :global, default: %{
+    "aria-hidden": "true",
+    class: "w-6 h-6",
+    fill: "currentColor",
+    viewBox: "0 0 24 24"
+  }
+
+  slot :inner_block, required: true
+
+  defp svg_solid(assigns) do
+    ~H"""
+    <svg xmlns="http://www.w3.org/2000/svg" {@rest}>
+      <%= render_slot(@inner_block) %>
+    </svg>
+    """
+  end
+
+  attr :rest, :global
+
+  def arrow_path(assigns) do
+    ~H"""
+    <.svg_outline {@rest}>
+      <path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99" />
+    </.svg_outline>
+    """
+  end
+
+  attr :rest, :global
+
+  def computer_desktop(assigns) do
+    ~H"""
+    <.svg_outline {@rest}>
+      <path stroke-linecap="round" stroke-linejoin="round" d="M9 17.25v1.007a3 3 0 01-.879 2.122L7.5 21h9l-.621-.621A3 3 0 0115 18.257V17.25m6-12V15a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 15V5.25m18 0A2.25 2.25 0 0018.75 3H5.25A2.25 2.25 0 003 5.25m18 0V12a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 12V5.25" />
+    </.svg_outline>
+    """
+  end
+
+  attr :rest, :global
+
+  def moon(assigns) do
+    ~H"""
+    <.svg_outline {@rest}>
+      <path d="M17.715 15.15A6.5 6.5 0 0 1 9 6.035C6.106 6.922 4 9.645 4 12.867c0 3.94 3.153 7.136 7.042 7.136 3.101 0 5.734-2.032 6.673-4.853Z"></path>
+    </.svg_outline>
+    """
+  end
+
+  attr :rest, :global
+
+  def sun(assigns) do
+    ~H"""
+    <.svg_outline {@rest}>
+      <path stroke-linecap="round" stroke-linejoin="round" d="M12 3v2.25m6.364.386l-1.591 1.591M21 12h-2.25m-.386 6.364l-1.591-1.591M12 18.75V21m-4.773-4.227l-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z" />
+    </.svg_outline>
+    """
+  end
+end

lib/oban/web/components/layouts.ex

@@ -3,7 +3,7 @@ defmodule Oban.Web.Layouts do
 
   import Oban.Web.Helpers
 
-  alias Oban.Web.RefreshComponent
+  alias Oban.Web.Components.{Refresh, Theme}
 
   js_path = Path.join(__DIR__, "../../../../priv/static/app.js")
   css_path = Path.join(__DIR__, "../../../../priv/static/app.css")
@@ -86,10 +86,10 @@ defmodule Oban.Web.Layouts do
     ~H"""
     <button
       id="dark-toggle"
-      class="ml-3 p-2 relative text-blue-800 dark:text-gray-50 bg-blue-200 dark:bg-blue-300 dark:bg-opacity-25 rounded-full focus:outline-none hover:text-blue-600 dark:hover:text-gray-300 hidden md:block"
+      class="ml-3 relative text-slate-500 dark:text-slate-400 rounded-full focus:outline-none hover:text-slate-600 dark:hover:text-slate-300 hidden md:block"
       data-title="Toggle dark mode"
       phx-hook="ToggleDarkMode">
-      <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path></svg>
+      <Icons.moon />
     </button>
     """
   end
@@ -118,8 +118,7 @@ defmodule Oban.Web.Layouts do
   end
 
   defp link_class(page, page) do
-    "font-medium text-sm rounded-md px-3 py-2 bg-blue-200 text-blue-800 dark:text-gray-200 dark:bg-blue-300 dark:bg-opacity-25"
-  end
+    "font-medium text-sm rounded-md px-3 py-2 bg-blue-200 text-blue-800 dark:text-gray-200 dark:bg-blue-300 dark:bg-opacity-25" end
 
   defp link_class(_pag, _exp) do
     "font-medium text-sm rounded-md px-3 py-2 text-gray-600 dark:text-gray-100 hover:text-gray-800 dark:hover:text-gray-300"

lib/oban/web/components/layouts/live.html.heex

@@ -9,8 +9,8 @@
   <header class="flex items-center">
     <.logo />
     <.tabs socket={@socket} page={@page.name} />
-    <.live_component module={RefreshComponent} id="refresh" refresh={@refresh} />
-    <.dark_toggle />
+    <.live_component module={Refresh} id="refresh" refresh={@refresh} />
+    <.live_component module={Theme} id="theme" />
   </header>
 
   <%= @inner_content %>

lib/oban/web/components/layouts/root.html.heex

@@ -16,7 +16,10 @@
     <style phx-track-static nonce={@csp_nonces.style}><%= raw(render("app.css")) %></style>
 
     <script nonce={@csp_nonces.script}>
-      if (localStorage.theme === "dark" || (!("theme" in localStorage) && window.matchMedia("(prefers-color-scheme: dark)").matches)) {
+      const wantsDark = window.matchMedia("(prefers-color-scheme: dark)").matches
+      const noPreference = !("theme" in localStorage)
+
+      if ((localStorage.theme === "dark") || (localStorage.theme === "system" && wantsDark) || (noPreference && wantsDark)) {
         document.documentElement.classList.add("dark")
       } else {
         document.documentElement.classList.remove("dark")
@@ -28,5 +31,7 @@
     <%= @inner_content %>
   </body>
 
-  <script defer phx-track-static type="text/javascript" nonce={@csp_nonces.script}><%= raw(render("app.js")) %></script>
+  <script phx-track-static type="text/javascript" nonce={@csp_nonces.script}>
+    <%= raw(render("app.js")) %>
+  </script>
 </html>

lib/oban/web/components/refresh_component.ex renamed to lib/oban/web/components/refresh.ex

@@ -1,8 +1,6 @@
-defmodule Oban.Web.RefreshComponent do
+defmodule Oban.Web.Components.Refresh do
   use Oban.Web, :live_component
 
-  alias Phoenix.LiveView.JS
-
   @refresh_options %{1 => "1s", 2 => "2s", 5 => "5s", 15 => "15s", 60 => "1m", -1 => "Off"}
 
   @impl Phoenix.LiveComponent

lib/oban/web/components/theme.ex

@@ -0,0 +1,91 @@
+defmodule Oban.Web.Components.Theme do
+  use Oban.Web, :live_component
+
+  @impl Phoenix.LiveComponent
+  def mount(socket) do
+    {:ok, assign(socket, :theme, "unknown")}
+  end
+
+  @impl Phoenix.LiveComponent
+  def render(assigns) do
+    ~H"""
+    <div class="ml-3 relative" id="theme-selector" phx-hook="RestoreTheme">
+      <button
+        id="dark-toggle"
+        class="text-slate-500 dark:text-slate-400 focus:outline-none hover:text-slate-600 dark:hover:text-slate-300 hidden md:block"
+        aria-haspopup="listbox"
+        aria-expanded="true"
+        aria-labelledby="listbox-label"
+        data-title="Toggle theme"
+        phx-hook="Tippy"
+        phx-click={JS.toggle(to: "#theme-menu")}
+        type="button"
+      >
+        <%= case @theme do %>
+          <% "light" -> %>
+            <Icons.sun />
+          <% "dark" -> %>
+            <Icons.moon />
+          <% "system" -> %>
+            <Icons.computer_desktop />
+          <% _ -> %>
+            <span class="block w-6 h-6"></span>
+        <% end %>
+      </button>
+
+      <ul
+        id="theme-menu"
+        class="hidden absolute z-50 top-full right-0 mt-4 overflow-hidden rounded-lg shadow-lg w-36 py-1 text-sm font-semibold bg-white dark:bg-slate-800"
+        tabindex="-1"
+        role="listbox"
+      >
+        <.option value="light" current={@theme}>
+          <Icons.sun />
+        </.option>
+
+        <.option value="dark" current={@theme}>
+          <Icons.moon />
+        </.option>
+
+        <.option value="system" current={@theme}>
+          <Icons.computer_desktop />
+        </.option>
+      </ul>
+    </div>
+    """
+  end
+
+  attr :current, :string, required: true
+  attr :value, :string, required: true
+  slot :inner_block, required: true
+
+  defp option(assigns) do
+    class =
+      if assigns.current == assigns.value do
+        "text-blue-500 dark:text-blue-400"
+      else
+        "text-slate-500 dark:text-slate-400 "
+      end
+
+    assigns = assign(assigns, :class, class)
+
+    ~H"""
+    <li
+      class={"block w-full py-1 px-2 flex items-center cursor-pointer space-x-2 hover:bg-slate-50 hover:dark:bg-slate-600/30 #{@class}"}
+      id={"select-theme-#{@value}"}
+      phx-click-away={JS.hide(to: "#theme-menu")}
+      phx-hook="ChangeTheme"
+      role="option"
+      value={@value}
+    >
+      <%= render_slot(@inner_block) %>
+      <span class="capitalize text-slate-800 dark:text-slate-200"><%= @value %></span>
+    </li>
+    """
+  end
+
+  @impl Phoenix.LiveComponent
+  def handle_event("restore", %{"theme" => theme}, socket) do
+    {:noreply, assign(socket, :theme, theme)}
+  end
+end