From 46997c261d2370d7612b5cbf8ac5c3523b4b5242 Mon Sep 17 00:00:00 2001
From: inhji <johnnie@posteo.de>
Date: Wed, 29 Mar 2023 16:10:53 +0200
Subject: [PATCH 1/2] add hover state for home items

---
 lib/chiya_web/controllers/page_html/home.html.heex | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/chiya_web/controllers/page_html/home.html.heex b/lib/chiya_web/controllers/page_html/home.html.heex
index 41d7a94..486b344 100644
--- a/lib/chiya_web/controllers/page_html/home.html.heex
+++ b/lib/chiya_web/controllers/page_html/home.html.heex
@@ -27,7 +27,7 @@
     <%= if @channel do %>
       <div class="w-full mt-6 sm:w-auto flex flex-col gap-1.5">
         <%= for note <- @channel.notes do %>
-          <a href={~p"/n/#{note.slug}"} class="group">
+          <a href={~p"/n/#{note.slug}"} class="group rounded -mx-2 -my-0.5 px-2 py-0.5 hover:bg-theme-dim">
             <span class="text-theme-heading text-lg font-semibold leading-8 group-hover:text-theme-heading/75"><%= note.name %></span>
             <span class="text-theme-muted text-sm group-hover:text-theme-muted/75"><%= pretty_date(note.published_at) %></span>
           </a>

From c7c4f554f938b1b16de7c2d6b78eeabc3e5a93ee Mon Sep 17 00:00:00 2001
From: Inhji <johnnie@posteo.de>
Date: Wed, 29 Mar 2023 18:47:45 +0200
Subject: [PATCH 2/2] add theming to public pages, make default theme
 dark/light

---
 assets/css/app.css                            | 23 +++++++++++++------
 lib/chiya_web/components/admin_components.ex  | 14 +++--------
 lib/chiya_web/components/layouts.ex           |  7 ------
 .../components/layouts/root_public.html.heex  |  9 +++++++-
 .../controllers/page_html/home.html.heex      |  2 +-
 .../controllers/page_html/note.html.heex      |  2 +-
 6 files changed, 29 insertions(+), 28 deletions(-)

diff --git a/assets/css/app.css b/assets/css/app.css
index 64d5953..5939420 100644
--- a/assets/css/app.css
+++ b/assets/css/app.css
@@ -6,13 +6,22 @@
 @import "./lightbox.css";
 
 @layer base {
-  :root {
-    --color-primary: 16 185 129;
+  :root[data-theme=default] {
+    --color-primary: 68 68 68;
     --color-background: 255 255 255;
-    --color-text-base: 82 82 91;
-    --color-text-heading: 24 24 27;
-    --color-text-muted: 82 82 91;
-    --color-text-dim: 244 244 245;
+    --color-text-base: 68 68 68;
+    --color-text-heading: 68 68 68;
+    --color-text-muted: 153 153 153;
+    --color-text-dim: 204 204 204;
+  }
+
+  :root[data-theme=default][data-mode=dark] {
+    --color-primary: 255 255 255;
+    --color-background: 34 34 34;
+    --color-text-base: 204 204 204;
+    --color-text-heading: 255 255 255;
+    --color-text-muted: 102 102 102;
+    --color-text-dim: 68 68 68;
   }
 
   :root[data-theme=roguelight] {
@@ -28,7 +37,7 @@
 /* 
   Invert prose styles based on the variant of the theme. 
 */
-:root[data-variant=dark] .prose {
+:root[data-mode=dark] .prose {
   @apply prose-invert;
 }
 
diff --git a/lib/chiya_web/components/admin_components.ex b/lib/chiya_web/components/admin_components.ex
index 2a8220d..5e86406 100644
--- a/lib/chiya_web/components/admin_components.ex
+++ b/lib/chiya_web/components/admin_components.ex
@@ -70,15 +70,6 @@ defmodule ChiyaWeb.AdminComponents 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-sun-mini" class="h-4 w-4" />
-          </.link>
-        </li>
         <li>
           <.link
             href={~p"/user"}
@@ -107,10 +98,11 @@ defmodule ChiyaWeb.AdminComponents do
       <% else %>
         <li>
           <.link
-            href={~p"/user/register"}
+            href="#"
+            id="dark-mode-toggle"
             class="text-xs leading-6 text-gray-100 font-semibold hover:text-gray-300"
           >
-            Register
+            <.icon name="hero-sun-mini" class="h-4 w-4" />
           </.link>
         </li>
         <li>
diff --git a/lib/chiya_web/components/layouts.ex b/lib/chiya_web/components/layouts.ex
index 48692c0..a49bec1 100644
--- a/lib/chiya_web/components/layouts.ex
+++ b/lib/chiya_web/components/layouts.ex
@@ -2,11 +2,4 @@ defmodule ChiyaWeb.Layouts do
   use ChiyaWeb, :html
 
   embed_templates "layouts/*"
-
-  @doc """
-  Defines which themes are light and which are dark themes.
-  This influences the prose styles in app.css. 
-  """
-  def theme_variant(:default), do: "light"
-  def theme_variant(:roguelight), do: "dark"
 end
diff --git a/lib/chiya_web/components/layouts/root_public.html.heex b/lib/chiya_web/components/layouts/root_public.html.heex
index c2d0e5a..7ec655d 100644
--- a/lib/chiya_web/components/layouts/root_public.html.heex
+++ b/lib/chiya_web/components/layouts/root_public.html.heex
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" style="scrollbar-gutter: stable;" data-theme={@settings.theme} data-variant={theme_variant(@settings.theme)}>
+<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" />
@@ -13,6 +13,13 @@
     <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>
     <style><%= @settings.custom_css %></style>
   </head>
   <body class="bg-theme-background antialiased">
diff --git a/lib/chiya_web/controllers/page_html/home.html.heex b/lib/chiya_web/controllers/page_html/home.html.heex
index 486b344..d4f14a7 100644
--- a/lib/chiya_web/controllers/page_html/home.html.heex
+++ b/lib/chiya_web/controllers/page_html/home.html.heex
@@ -1,6 +1,6 @@
 <div class="px-4 py-10 sm:py-28 sm:px-6 lg:px-8 xl:py-32 xl:px-28">
   <div class="mx-auto max-w-xl lg:mx-0">
-    <h1 class="mt-4 text-[2rem] font-semibold leading-10 tracking-tighter text-theme-primary">
+    <h1 class="mt-4 text-[2rem] font-semibold font-serif leading-10 tracking-tighter text-theme-primary">
       <%= @settings.title %>
     </h1>
     <p class="mt-4 text-base leading-7 text-theme-base">
diff --git a/lib/chiya_web/controllers/page_html/note.html.heex b/lib/chiya_web/controllers/page_html/note.html.heex
index aca5e79..fd8a8f6 100644
--- a/lib/chiya_web/controllers/page_html/note.html.heex
+++ b/lib/chiya_web/controllers/page_html/note.html.heex
@@ -1,5 +1,5 @@
 <header>
-  <h1 class="text-lg font-semibold leading-8 text-theme-heading"><%= @note.name %></h1>
+  <h1 class="text-2xl font-semibold leading-8 text-theme-heading font-serif"><%= @note.name %></h1>
   <p class="mt-2 text-sm leading-6 text-theme-muted">
     <%= pretty_date(@note.published_at) %>
   </p>