From c133b8b3a8705ade915564e2eccca2624c7ddc12 Mon Sep 17 00:00:00 2001
From: Inhji <johnnie@posteo.de>
Date: Fri, 17 Mar 2023 20:46:25 +0100
Subject: [PATCH] add dark mode with toggle for admin \o/

---
 assets/js/app.js                              | 19 +++++++
 assets/tailwind.config.js                     |  1 +
 lib/chiya_web/components/core_components.ex   | 55 +++++++++++--------
 .../components/layouts/app.html.heex          | 14 ++---
 .../components/layouts/public.html.heex       |  5 +-
 .../components/layouts/root_app.html.heex     | 11 +++-
 .../controllers/setting_html/show.html.heex   |  2 +-
 lib/chiya_web/live/note_show_live.ex          |  2 +-
 lib/chiya_web/router.ex                       |  2 +-
 9 files changed, 73 insertions(+), 38 deletions(-)

diff --git a/assets/js/app.js b/assets/js/app.js
index b1f03d2..6ec18af 100644
--- a/assets/js/app.js
+++ b/assets/js/app.js
@@ -42,3 +42,22 @@ liveSocket.connect()
 // >> liveSocket.disableLatencySim()
 window.liveSocket = liveSocket
 
+document
+	.querySelector("#dark-mode-toggle")
+	.addEventListener("click", (e) => {
+		e.preventDefault()
+		const data = document.documentElement.dataset
+		if (data["mode"] && data["mode"] == "dark") {
+
+			delete data["mode"]
+			window.localStorage.removeItem("theme")
+
+		} else {
+
+			data["mode"] = "dark"
+			window.localStorage.setItem("theme", "dark")
+
+		}
+	})
+
+console.log("boot complete!")
\ No newline at end of file
diff --git a/assets/tailwind.config.js b/assets/tailwind.config.js
index 3c64e78..c359830 100644
--- a/assets/tailwind.config.js
+++ b/assets/tailwind.config.js
@@ -12,6 +12,7 @@ module.exports = {
     "../lib/*_web.ex",
     "../lib/*_web/**/*.*ex"
   ],
+  darkMode: ['class', '[data-mode="dark"]'],
   theme: {
     extend: {
       colors: {
diff --git a/lib/chiya_web/components/core_components.ex b/lib/chiya_web/components/core_components.ex
index 3278c7c..17de460 100644
--- a/lib/chiya_web/components/core_components.ex
+++ b/lib/chiya_web/components/core_components.ex
@@ -23,7 +23,7 @@ defmodule ChiyaWeb.CoreComponents do
   """
   def line(assigns) do
     ~H"""
-    <hr class="my-6" />
+    <hr class="my-6 dark:border-gray-700" />
     """
   end
 
@@ -40,6 +40,15 @@ defmodule ChiyaWeb.CoreComponents do
         <li class="text-xs leading-6 text-gray-100">
           <%= @current_user.email %>
         </li>
+        <li>
+          <.link
+            href=""
+            id="dark-mode-toggle"
+            class="text-xs leading-6 text-gray-100 font-semibold hover:text-gray-300"
+          >
+            <.icon name="hero-bolt-mini" class="h-4 w-4" />
+          </.link>
+        </li>
         <li>
           <.link
             href={~p"/user"}
@@ -97,7 +106,7 @@ defmodule ChiyaWeb.CoreComponents do
   def live_upload(assigns) do
     ~H"""
     <div>
-      <.live_file_input upload={@upload} />
+      <.live_file_input upload={@upload} class="dark:text-gray-300" />
 
       <section phx-drop-target={@upload.ref}>
         <%= for entry <- @upload.entries do %>
@@ -273,8 +282,8 @@ defmodule ChiyaWeb.CoreComponents do
       role="alert"
       class={[
         "fixed hidden top-2 right-2 w-80 sm:w-96 z-50 rounded-lg p-3 shadow-md shadow-gray-900/5 ring-1",
-        @kind == :info && "bg-emerald-50 text-emerald-800 ring-emerald-500 fill-cyan-900",
-        @kind == :error && "bg-rose-50 p-3 text-rose-900 shadow-md ring-rose-500 fill-rose-900"
+        @kind == :info && "bg-emerald-50 text-emerald-800 ring-emerald-500 fill-cyan-900 dark:bg-emerald-900 dark:text-emerald-200 hover:opacity-40",
+        @kind == :error && "bg-rose-50 p-3 text-rose-900 shadow-md ring-rose-500 fill-rose-900 dark:bg-rose-900 dark:text-rose-200 hover:opacity-40"
       ]}
       {@rest}
     >
@@ -349,7 +358,7 @@ defmodule ChiyaWeb.CoreComponents do
   def simple_form(assigns) do
     ~H"""
     <.form :let={f} for={@for} as={@as} {@rest}>
-      <div class="space-y-8 bg-white mt-10">
+      <div class="space-y-8 bg-white dark:bg-gray-900 mt-10">
         <%= render_slot(@inner_block, f) %>
         <div :for={action <- @actions} class="mt-2 flex items-center justify-between gap-6">
           <%= render_slot(action, f) %>
@@ -379,7 +388,7 @@ defmodule ChiyaWeb.CoreComponents do
       type={@type}
       class={[
         "phx-submit-loading:opacity-75 rounded-lg bg-gray-900 hover:bg-gray-700 py-2 px-3",
-        "text-sm font-semibold leading-6 text-white active:text-white/80",
+        "text-sm font-semibold leading-6 text-white active:text-white/80 dark:bg-gray-800 dark:hover:bg-gray-700",
         @class
       ]}
       {@rest}
@@ -438,7 +447,7 @@ defmodule ChiyaWeb.CoreComponents do
 
     ~H"""
     <div phx-feedback-for={@name}>
-      <label class="flex items-center gap-4 text-sm leading-6 text-gray-600">
+      <label class="flex items-center gap-4 text-sm leading-6 text-gray-600 dark:text-gray-300">
         <input type="hidden" name={@name} value="false" />
         <input
           type="checkbox"
@@ -446,7 +455,7 @@ defmodule ChiyaWeb.CoreComponents do
           name={@name}
           value="true"
           checked={@checked}
-          class="rounded border-gray-300 text-gray-900 focus:ring-gray-900"
+          class="rounded border-gray-300 text-gray-900 focus:ring-gray-900 dark:text-gray-700 dark:focus:bg-gray-700 dark:border-gray-700 dark:bg-gray-700"
           {@rest}
         />
         <%= @label %>
@@ -463,7 +472,7 @@ defmodule ChiyaWeb.CoreComponents do
       <select
         id={@id}
         name={@name}
-        class="mt-1 block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-gray-500 focus:border-gray-500 sm:text-sm"
+        class="mt-1 block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-gray-500 focus:border-gray-500 sm:text-sm dark:bg-gray-800 dark:text-gray-300 dark:border-gray-700 dark:focus:border-gray-400"
         multiple={@multiple}
         {@rest}
       >
@@ -487,6 +496,7 @@ defmodule ChiyaWeb.CoreComponents do
           "text-gray-900 focus:border-gray-400 focus:outline-none focus:ring-4 focus:ring-gray-800/5 sm:text-sm sm:leading-6",
           "phx-no-feedback:border-gray-300 phx-no-feedback:focus:border-gray-400 phx-no-feedback:focus:ring-gray-800/5",
           "border-gray-300 focus:border-gray-400 focus:ring-gray-800/5",
+          "dark:bg-gray-800 dark:text-gray-300 dark:border-gray-700 dark:focus:border-gray-400",
           @errors != [] && "border-rose-400 focus:border-rose-400 focus:ring-rose-400/10"
         ]}
         {@rest}
@@ -510,6 +520,7 @@ defmodule ChiyaWeb.CoreComponents do
           "text-gray-900 focus:outline-none focus:ring-4 sm:text-sm sm:leading-6",
           "phx-no-feedback:border-gray-300 phx-no-feedback:focus:border-gray-400 phx-no-feedback:focus:ring-gray-800/5",
           "border-gray-300 focus:border-gray-400 focus:ring-gray-800/5",
+          "dark:bg-gray-800 dark:text-gray-300 dark:border-gray-700 dark:focus:border-gray-400",
           @errors != [] && "border-rose-400 focus:border-rose-400 focus:ring-rose-400/10"
         ]}
         {@rest}
@@ -527,7 +538,7 @@ defmodule ChiyaWeb.CoreComponents do
 
   def label(assigns) do
     ~H"""
-    <label for={@for} class="block text-sm font-semibold leading-6 text-gray-800">
+    <label for={@for} class="block text-sm font-semibold leading-6 text-gray-800 dark:text-gray-300">
       <%= render_slot(@inner_block) %>
     </label>
     """
@@ -560,10 +571,10 @@ defmodule ChiyaWeb.CoreComponents do
     ~H"""
     <header class={[@actions != [] && "flex items-center justify-between gap-6", @class]}>
       <div>
-        <h1 class="text-lg font-semibold leading-8 text-gray-800">
+        <h1 class="text-lg font-semibold leading-8 text-gray-800 dark:text-gray-200">
           <%= render_slot(@inner_block) %>
         </h1>
-        <p :if={@subtitle != []} class="mt-2 text-sm leading-6 text-gray-600">
+        <p :if={@subtitle != []} class="mt-2 text-sm leading-6 text-gray-600 dark:text-gray-400">
           <%= render_slot(@subtitle) %>
         </p>
       </div>
@@ -615,27 +626,27 @@ defmodule ChiyaWeb.CoreComponents do
         <tbody
           id={@id}
           phx-update={match?(%Phoenix.LiveView.LiveStream{}, @rows) && "stream"}
-          class="relative divide-y divide-gray-100 border-t border-gray-200 text-sm leading-6 text-gray-700"
+          class="relative divide-y divide-gray-100 border-t border-gray-200 text-sm leading-6 text-gray-700 dark:text-gray-200 dark:border-gray-700 dark:divide-gray-800"
         >
-          <tr :for={row <- @rows} id={@row_id && @row_id.(row)} class="group hover:bg-gray-50">
+          <tr :for={row <- @rows} id={@row_id && @row_id.(row)} class="group hover:bg-gray-50 dark:hover:bg-gray-800">
             <td
               :for={{col, i} <- Enum.with_index(@col)}
               phx-click={@row_click && @row_click.(row)}
               class={["relative p-0", @row_click && "hover:cursor-pointer"]}
             >
               <div class="block py-4 pr-6">
-                <span class="absolute -inset-y-px right-0 -left-4 group-hover:bg-gray-50 sm:rounded-l-xl" />
-                <span class={["relative", i == 0 && "font-semibold text-gray-900"]}>
+                <span class="absolute -inset-y-px right-0 -left-4 group-hover:bg-gray-50 sm:rounded-l-xl dark:group-hover:bg-gray-800" />
+                <span class={["relative", i == 0 && "font-semibold text-gray-900 dark:text-gray-100"]}>
                   <%= render_slot(col, @row_item.(row)) %>
                 </span>
               </div>
             </td>
             <td :if={@action != []} class="relative p-0 w-14">
               <div class="relative whitespace-nowrap py-4 text-right text-sm font-medium">
-                <span class="absolute -inset-y-px -right-4 left-0 group-hover:bg-gray-50 sm:rounded-r-xl" />
+                <span class="absolute -inset-y-px -right-4 left-0 group-hover:bg-gray-50 sm:rounded-r-xl dark:group-hover:bg-gray-800" />
                 <span
                   :for={action <- @action}
-                  class="relative ml-4 font-semibold leading-6 text-gray-900 hover:text-gray-700"
+                  class="relative ml-4 font-semibold leading-6 text-gray-900 hover:text-gray-700 dark:text-gray-100 dark:hover:text-gray-300"
                 >
                   <%= render_slot(action, @row_item.(row)) %>
                 </span>
@@ -665,10 +676,10 @@ defmodule ChiyaWeb.CoreComponents do
   def list(assigns) do
     ~H"""
     <div class="mt-14">
-      <dl class="-my-4 divide-y divide-gray-100">
+      <dl class="-my-4 divide-y divide-gray-100 dark:divide-gray-800">
         <div :for={item <- @item} class="flex gap-4 py-4 sm:gap-8">
-          <dt class="w-1/4 flex-none text-[0.8125rem] leading-6 text-gray-500"><%= item.title %></dt>
-          <dd class="text-sm leading-6 text-gray-700"><%= render_slot(item) %></dd>
+          <dt class="w-1/4 flex-none text-[0.8125rem] leading-6 text-gray-500 dark:text-gray-300"><%= item.title %></dt>
+          <dd class="text-sm leading-6 text-gray-700 dark:text-gray-400"><%= render_slot(item) %></dd>
         </div>
       </dl>
     </div>
@@ -690,7 +701,7 @@ defmodule ChiyaWeb.CoreComponents do
     <div class="mt-16">
       <.link
         navigate={@navigate}
-        class="text-sm font-semibold leading-6 text-gray-900 hover:text-gray-700"
+        class="text-sm font-semibold leading-6 text-gray-900 hover:text-gray-700 dark:text-gray-300 dark:hover:text-gray-400"
       >
         <.icon name="hero-arrow-left-solid" class="w-3 h-3" />
         <%= render_slot(@inner_block) %>
diff --git a/lib/chiya_web/components/layouts/app.html.heex b/lib/chiya_web/components/layouts/app.html.heex
index 44bcf70..f6f9915 100644
--- a/lib/chiya_web/components/layouts/app.html.heex
+++ b/lib/chiya_web/components/layouts/app.html.heex
@@ -1,33 +1,33 @@
 <header class="px-4 sm:px-6 lg:px-8">
-  <div class="flex items-center justify-between border-b border-gray-100 py-3">
+  <div class="flex items-center justify-between border-b border-gray-100 dark:border-gray-800 py-3">
     <div class="flex items-center gap-4">
-      <a href="/">Chiya</a>
-      <p class="rounded-full bg-brand/5 px-2 text-[0.8125rem] font-medium leading-6 text-brand">
+      <a href="/" class="text-gray-900 font-semibold dark:text-gray-100">Chiya</a>
+      <p class="rounded-full bg-emerald-500/5 px-2 text-[0.8125rem] font-medium leading-6 text-emerald-500">
         v<%= Application.spec(:chiya, :vsn) %>
       </p>
     </div>
     <div class="flex items-center gap-4">
       <.link
         href={~p"/admin/notes"}
-        class="text-xs font-semibold leading-6 text-gray-900 hover:text-gray-700"
+        class="text-xs font-semibold leading-6 text-gray-900 hover:text-gray-700 dark:text-gray-200"
       >
         Notes
       </.link>
       <.link
         href={~p"/admin/channels"}
-        class="text-xs font-semibold leading-6 text-gray-900 hover:text-gray-700"
+        class="text-xs font-semibold leading-6 text-gray-900 hover:text-gray-700 dark:text-gray-200"
       >
         Channels
       </.link>
       <.link
         href={~p"/admin/identities"}
-        class="text-xs font-semibold leading-6 text-gray-900 hover:text-gray-700"
+        class="text-xs font-semibold leading-6 text-gray-900 hover:text-gray-700 dark:text-gray-200"
       >
         Identities
       </.link>
       <.link
         href={~p"/admin/settings"}
-        class="text-xs font-semibold leading-6 text-gray-900 hover:text-gray-700"
+        class="text-xs font-semibold leading-6 text-gray-900 hover:text-gray-700 dark:text-gray-200"
       >
         Settings
       </.link>
diff --git a/lib/chiya_web/components/layouts/public.html.heex b/lib/chiya_web/components/layouts/public.html.heex
index 887e0f3..34dbe38 100644
--- a/lib/chiya_web/components/layouts/public.html.heex
+++ b/lib/chiya_web/components/layouts/public.html.heex
@@ -1,10 +1,7 @@
 <header class="px-4 sm:px-6 lg:px-8">
   <div class="flex items-center justify-between border-b border-theme-dim py-3">
     <div class="flex items-center gap-4">
-      <a href="/" class="text-theme-primary font-semibold hover:text-theme-primary/75">Chiya</a>
-      <p class="rounded-full bg-theme-base/5 px-2 text-[0.8125rem] font-medium leading-6 text-theme-base">
-        v<%= Application.spec(:chiya, :vsn) %>
-      </p>
+      <a href="/" class="text-theme-base font-semibold">Chiya</a>
     </div>
     <div class="flex items-center gap-4">
       <.link
diff --git a/lib/chiya_web/components/layouts/root_app.html.heex b/lib/chiya_web/components/layouts/root_app.html.heex
index d775dd8..a8200a2 100644
--- a/lib/chiya_web/components/layouts/root_app.html.heex
+++ b/lib/chiya_web/components/layouts/root_app.html.heex
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" style="scrollbar-gutter: stable;">
+<html lang="en" style="scrollbar-gutter: stable;" data-theme={@settings.theme}>
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
@@ -10,8 +10,15 @@
     <link phx-track-static rel="stylesheet" href={~p"/assets/app.css"} />
     <script defer phx-track-static type="text/javascript" src={~p"/assets/app.js"}>
     </script>
+    <script>
+      if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+        document.documentElement.dataset["mode"] = "dark"
+      } else {
+        delete document.documentElement.dataset["mode"]
+      }
+    </script>
   </head>
-  <body class="bg-white antialiased">
+  <body class="bg-white dark:bg-gray-900 antialiased">
     <.admin_bar current_user={@current_user} />
     <%= @inner_content %>
   </body>
diff --git a/lib/chiya_web/controllers/setting_html/show.html.heex b/lib/chiya_web/controllers/setting_html/show.html.heex
index d5c0b4c..e472d9c 100644
--- a/lib/chiya_web/controllers/setting_html/show.html.heex
+++ b/lib/chiya_web/controllers/setting_html/show.html.heex
@@ -20,7 +20,7 @@
     <:item title="Subtitle"><%= @setting.subtitle %></:item>
     <:item title="Theme">
       <%= @setting.theme %>
-      <div class="flex flex-row gap-2 bg-theme-background">
+      <div class="flex flex-row gap-2 bg-theme-background p-1 rounded-lg border">
         <.icon name="hero-heart-solid" class="bg-theme-primary" />
         <.icon name="hero-heart-solid" class="bg-theme-heading" />
         <.icon name="hero-heart-solid" class="bg-theme-base" />
diff --git a/lib/chiya_web/live/note_show_live.ex b/lib/chiya_web/live/note_show_live.ex
index da953fd..463a157 100644
--- a/lib/chiya_web/live/note_show_live.ex
+++ b/lib/chiya_web/live/note_show_live.ex
@@ -44,7 +44,7 @@ defmodule ChiyaWeb.NoteShowLive do
                 src={Chiya.Uploaders.NoteImage.url({image.path, image}, :thumb_dithered)}
               />
             </a>
-            <p class="text-center text-xs text-gray-700">
+            <p class="text-center text-xs text-gray-700 dark:text-gray-300">
               <a
                 href="#"
                 phx-click="delete_image"
diff --git a/lib/chiya_web/router.ex b/lib/chiya_web/router.ex
index fff16db..717e4eb 100644
--- a/lib/chiya_web/router.ex
+++ b/lib/chiya_web/router.ex
@@ -12,11 +12,11 @@ defmodule ChiyaWeb.Router do
     plug :protect_from_forgery
     plug :put_secure_browser_headers
     plug :fetch_current_user
+    plug :fetch_settings
   end
 
   pipeline :public do
     plug :put_root_layout, {ChiyaWeb.Layouts, :root_public}
-    plug :fetch_settings
     plug :fetch_identities
   end