More dark mode

assets/js/dark-mode-widget.js

@@ -2,25 +2,29 @@ let DarkModeHook = {
 
   mounted() {
     this.button = this.el.querySelector("button")
-    this.button.addEventListener("click", this.show_selector.bind(this))
+    this.button.addEventListener("click", this.toggle_chooser.bind(this))
-    this.selector = this.el.querySelector("ul")
+    this.chooser = this.el.querySelector("ul")
     var lis = this.el.querySelectorAll("li")
     lis[0].addEventListener("click", this.switch_to_day_mode.bind(this))
     lis[1].addEventListener("click", this.switch_to_night_mode.bind(this))
     lis[2].addEventListener("click", this.switch_to_system_mode.bind(this))
   },
-  show_selector(){
+  toggle_chooser(){
-    this.selector.classList.remove("hidden")
+    if (this.chooser.classList.contains("hidden")){
+      this.chooser.classList.remove("hidden")
+    } else {
+      this.chooser.classList.add("hidden")
+    }
   },
   switch_to_day_mode() {
     document.documentElement.classList.remove('dark')
     localStorage.theme = 'light'
-    this.selector.classList.add("hidden")
+    this.chooser.classList.add("hidden")
   },
   switch_to_night_mode() {
     document.documentElement.classList.add('dark')
     localStorage.theme = 'dark'
-    this.selector.classList.add("hidden")
+    this.chooser.classList.add("hidden")
   },
   switch_to_system_mode() {
     if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
@@ -29,7 +33,7 @@ let DarkModeHook = {
       document.documentElement.classList.remove('dark')
     }
     localStorage.removeItem('theme')
-    this.selector.classList.add("hidden")
+    this.chooser.classList.add("hidden")
   },
 }
 

lib/outlook_web/components/public_components.ex

@@ -12,7 +12,7 @@ defmodule OutlookWeb.PublicComponents do
   def autor(assigns) do
     ~H"""
     <a href={"/autoren/#{@autor.id}"}>
-      <div class="p-4 my-2 border rounded-lg border-slate-400 text-slate-800">
+      <div class="p-4 my-2 border rounded-lg border-stone-400 text-stone-800 dark:text-stone-300 ">
         <div class="font-bold"><%= @autor.name %></div>
         <div class=""><%= @autor.description %></div>
       </div>
@@ -26,8 +26,8 @@ defmodule OutlookWeb.PublicComponents do
   def artikel(assigns) do
     ~H"""
     <.link navigate={"/artikel/#{@artikel.id}"}>
-      <div class="my-2 px-2 rounded border-2 border-solid border-gray-300">
+      <div class="my-2 px-2 rounded border-2 border-solid border-gray-300 dark:border-stone-800">
-        <h4 class="font-bold py-2"><%= @artikel.title %></h4>
+        <h4 class="font-bold  text-stone-800 dark:text-stone-300 py-2"><%= @artikel.title %></h4>
         <div :if={@show_author}><small><%= @artikel.article.author.name %></small></div>
         <div><small><%= @artikel.date |> Calendar.strftime("%d.%m.%Y") %></small></div>
         <div><%= @artikel.teaser |> raw %></div>

lib/outlook_web/controllers/artikel_html/show.html.heex

@@ -1,17 +1,17 @@
-<header class="mb-20">
+<header class="mb-6">
-  <h1 class="text-lg font-semibold leading-8 text-stone-800 dark:text-stone-200"><%= @artikel.title %></h1>
+  <h1 class="text-lg font-semibold leading-tight text-stone-800 dark:text-stone-200"><%= @artikel.title %></h1>
   <p class="my-2"><.link href={"/autoren/#{@artikel.article.author.id}"}><%= @artikel.article.author.name %></.link>
      &nbsp;&nbsp;&nbsp; — &nbsp;&nbsp;&nbsp;<%= Calendar.strftime(@artikel.article.date, "%d.%m.%Y") %></p>
-  <div>Original
+  <div>Original Artikel:
-    <.link href={@artikel.article.url} >
+    <.link class="hover:text-sky-700" href={@artikel.article.url} >
       <%= @artikel.article.title %>
     </.link><br>
   </div>
   <div class="my-2">
-    Übersetzung <%= Calendar.strftime(@artikel.date, "%d.%m.%Y") %>
+    Übersetzung: <%= Calendar.strftime(@artikel.date, "%d.%m.%Y") %>
   </div>
 </header>
 
-<div class="article w-full"><%= @artikel.public_content |> raw %></div>
+<div class="article w-full mx-auto max-w-xs"><%= @artikel.public_content |> raw %></div>
 
 <.back navigate={~p"/autoren/#{@artikel.article.author}"}>Back to Autor</.back>