feat: Light theme

crbelaus · crbelaus · commit afc029013e3c · 2026-05-09T11:50:39.000+02:00
Add a new light theme and a switcher to toggle between it and the
existing dark theme.
diff --git a/assets/css/app.css b/assets/css/app.css
@@ -12,3 +12,20 @@
   @apply bg-gray-500;
   border-radius: 4px;
 }
+
+/* ===== Light Theme ===== */
+body.light-theme {
+  background-color: rgb(255 255 255);
+  color: rgb(17 24 39);
+}
+
+/* Theme toggle icon visibility */
+.theme-icon-light {
+  display: none;
+}
+body.light-theme .theme-icon-dark {
+  display: none;
+}
+body.light-theme .theme-icon-light {
+  display: block;
+}
diff --git a/assets/js/app.js b/assets/js/app.js
@@ -5,6 +5,27 @@ let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("
 let livePath = document.querySelector("meta[name='live-path']").getAttribute("content");
 let liveTransport = document .querySelector("meta[name='live-transport']") .getAttribute("content");
 
+// Theme management
+const Theme = {
+  STORAGE_KEY: "error-tracker-theme",
+
+  init() {
+    const saved = localStorage.getItem(this.STORAGE_KEY);
+    if (saved === "light") {
+      document.body.classList.add("light-theme");
+    }
+  },
+
+  toggle() {
+    const isLight = document.body.classList.toggle("light-theme");
+    localStorage.setItem(this.STORAGE_KEY, isLight ? "light" : "dark");
+  },
+
+  isLight() {
+    return document.body.classList.contains("light-theme");
+  }
+};
+
 const Hooks = {
   JsonPrettyPrint: {
     mounted() {
@@ -26,6 +47,11 @@ const Hooks = {
         // Keep the original content if there's an error
       }
     }
+  },
+  ThemeInit: {
+    mounted() {
+      Theme.init();
+    }
   }
 };
 
@@ -41,6 +67,14 @@ topbar.config({ barColors: { 0: "#29d" }, shadowColor: "rgba(0, 0, 0, .3)" });
 window.addEventListener("phx:page-loading-start", (_info) => topbar.show(300));
 window.addEventListener("phx:page-loading-stop", (_info) => topbar.hide());
 
+// Set up theme toggle via event delegation (CSP-compliant, avoids inline onclick)
+document.addEventListener("click", function(e) {
+  var toggle = e.target.closest("[data-theme-toggle]");
+  if (toggle) {
+    Theme.toggle();
+  }
+});
+
 // connect if there are any LiveViews on the page
 liveSocket.connect();
 window.liveSocket = liveSocket;
diff --git a/assets/tailwind.config.js b/assets/tailwind.config.js
@@ -17,6 +17,7 @@ module.exports = {
     plugin(({addVariant}) => addVariant('phx-no-feedback', ['&.phx-no-feedback', '.phx-no-feedback &'])),
     plugin(({addVariant}) => addVariant('phx-click-loading', ['&.phx-click-loading', '.phx-click-loading &'])),
     plugin(({addVariant}) => addVariant('phx-submit-loading', ['&.phx-submit-loading', '.phx-submit-loading &'])),
-    plugin(({addVariant}) => addVariant('phx-change-loading', ['&.phx-change-loading', '.phx-change-loading &']))
+    plugin(({addVariant}) => addVariant('phx-change-loading', ['&.phx-change-loading', '.phx-change-loading &'])),
+    plugin(({addVariant}) => addVariant('light', 'body.light-theme &'))
   ]
 }
diff --git a/lib/error_tracker/web/components/core_components.ex b/lib/error_tracker/web/components/core_components.ex
@@ -21,7 +21,7 @@ defmodule ErrorTracker.Web.CoreComponents do
     <.link
       class={[
         "phx-submit-loading:opacity-75 py-[11.5px]",
-        "text-sm font-semibold text-sky-500 hover:text-white/80",
+        "text-sm font-semibold text-sky-500 light:text-sky-600 hover:text-white/80 light:hover:text-gray-900/80",
         @class
       ]}
       {@rest}
@@ -63,14 +63,14 @@ defmodule ErrorTracker.Web.CoreComponents do
   def badge(assigns) do
     color_class =
       case assigns.color do
-        :blue -> "bg-blue-900 text-blue-300"
-        :gray -> "bg-gray-700 text-gray-300"
-        :red -> "bg-red-400/10 text-red-300 ring-red-400/20"
-        :green -> "bg-emerald-400/10 text-emerald-300 ring-emerald-400/20"
-        :yellow -> "bg-yellow-900 text-yellow-300"
-        :indigo -> "bg-indigo-900 text-indigo-300"
-        :purple -> "bg-purple-900 text-purple-300"
-        :pink -> "bg-pink-900 text-pink-300"
+        :blue -> "bg-blue-900 light:bg-blue-100 text-blue-300 light:text-blue-800"
+        :gray -> "bg-gray-700 light:bg-gray-200 text-gray-300 light:text-gray-700"
+        :red -> "bg-red-400/10 light:bg-red-100 text-red-300 light:text-red-800 ring-red-400/20 light:ring-red-400/30"
+        :green -> "bg-emerald-400/10 light:bg-emerald-100 text-emerald-300 light:text-emerald-800 ring-emerald-400/20 light:ring-emerald-400/30"
+        :yellow -> "bg-yellow-900 light:bg-yellow-100 text-yellow-300 light:text-yellow-800"
+        :indigo -> "bg-indigo-900 light:bg-indigo-100 text-indigo-300 light:text-indigo-800"
+        :purple -> "bg-purple-900 light:bg-purple-100 text-purple-300 light:text-purple-800"
+        :pink -> "bg-pink-900 light:bg-pink-100 text-pink-300 light:text-pink-800"
       end
 
     assigns = Map.put(assigns, :color_class, color_class)
@@ -95,14 +95,14 @@ defmodule ErrorTracker.Web.CoreComponents do
     <div class="mt-10 w-full flex">
       <button
         :if={@page > 1}
-        class="flex items-center justify-center px-4 h-10 text-base font-medium text-gray-400  bg-gray-900 border border-gray-400 rounded-lg hover:bg-gray-800 hover:text-white"
+        class="flex items-center justify-center px-4 h-10 text-base font-medium text-gray-400 light:text-gray-500 bg-gray-900 light:bg-gray-100 border border-gray-400 light:border-gray-300 rounded-lg hover:bg-gray-800 light:hover:bg-gray-200 hover:text-white light:hover:text-gray-900"
         phx-click={@event_previous}
       >
         Previous page
       </button>
       <button
         :if={@page < @total_pages}
-        class="flex items-center justify-center px-4 h-10 text-base font-medium text-gray-400 bg-gray-900 border border-gray-400 rounded-lg hover:bg-gray-800 hover:text-white"
+        class="flex items-center justify-center px-4 h-10 text-base font-medium text-gray-400 light:text-gray-500 bg-gray-900 light:bg-gray-100 border border-gray-400 light:border-gray-300 rounded-lg hover:bg-gray-800 light:hover:bg-gray-200 hover:text-white light:hover:text-gray-900"
         phx-click={@event_next}
       >
         Next page
@@ -122,7 +122,7 @@ defmodule ErrorTracker.Web.CoreComponents do
     <div>
       <h2
         :if={assigns[:title]}
-        class={["text-sm font-semibold mb-2 uppercase text-gray-400", @title_class]}
+        class={["text-sm font-semibold mb-2 uppercase text-gray-400 light:text-gray-500", @title_class]}
       >
         {@title}
       </h2>
diff --git a/lib/error_tracker/web/components/layouts.ex b/lib/error_tracker/web/components/layouts.ex
@@ -35,17 +35,17 @@ defmodule ErrorTracker.Web.Layouts do
 
   def navbar(assigns) do
     ~H"""
-    <nav class="border-gray-400 bg-gray-900">
+    <nav class="border-gray-400 light:border-gray-300 bg-gray-900 light:bg-gray-100">
       <div class="container flex flex-wrap items-center justify-between mx-auto p-4">
         <.link
           href={dashboard_path(@socket)}
-          class="self-center text-2xl font-semibold whitespace-nowrap text-white"
+          class="self-center text-2xl font-semibold whitespace-nowrap text-white light:text-gray-900"
         >
           <span class="mr-2">🐛</span>ErrorTracker
         </.link>
         <button
           type="button"
-          class="inline-flex items-center p-2 w-10 h-10 justify-center text-sm rounded -lg md:hidden focus:outline-none focus:ring-2 text-gray-400 hover:bg-gray-700 focus:ring-gray-500"
+          class="inline-flex items-center p-2 w-10 h-10 justify-center text-sm rounded -lg md:hidden focus:outline-none focus:ring-2 text-gray-400 light:text-gray-500 hover:bg-gray-700 light:hover:bg-gray-200 focus:ring-gray-500"
           aria-controls="navbar-main"
           aria-expanded="false"
           phx-click={JS.toggle(to: "#navbar-main")}
@@ -68,7 +68,7 @@ defmodule ErrorTracker.Web.Layouts do
           </svg>
         </button>
         <div class="hidden w-full md:block md:w-auto" id="navbar-main">
-          <ul class="font-medium flex flex-col p-4 md:p-0 mt-4 border border-gray-400 bg-gray-900 rounded-lg md:flex-row md:space-x-8 rtl:space-x-reverse md:mt-0 md:border-0 md:bg-gray-800">
+          <ul class="font-medium flex flex-col p-4 md:p-0 mt-4 border border-gray-400 light:border-gray-300 bg-gray-900 light:bg-gray-100 rounded-lg md:flex-row md:space-x-8 rtl:space-x-reverse md:mt-0 md:border-0 md:bg-gray-800 light:md:bg-gray-50">
             <.navbar_item to="https://github.com/elixir-error-tracker/error-tracker" target="_blank">
               <svg
                 width="18"
@@ -86,6 +86,39 @@ defmodule ErrorTracker.Web.Layouts do
               </svg>
               GitHub
             </.navbar_item>
+            <li>
+              <button
+                data-theme-toggle
+                class="block py-2 px-3 rounded-lg text-white light:text-gray-900 hover:text-white light:hover:text-gray-900 hover:bg-gray-700 light:hover:bg-gray-200 md:hover:bg-transparent md:border-0 md:hover:text-sky-500"
+                aria-label="Toggle theme"
+                title="Toggle theme"
+              >
+                <!-- Moon icon (shown in dark mode) -->
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 20 20"
+                  fill="currentColor"
+                  class="w-5 h-5 theme-icon-dark"
+                >
+                  <path
+                    fill-rule="evenodd"
+                    d="M7.455 2.004a.75.75 0 0 1 .26.77 7 7 0 0 0 9.958 7.967.75.75 0 0 1 1.067.853A8.5 8.5 0 1 1 6.647 1.921a.75.75 0 0 1 .808.083Z"
+                    clip-rule="evenodd"
+                  />
+                </svg>
+                <!-- Sun icon (shown in light mode) -->
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 20 20"
+                  fill="currentColor"
+                  class="w-5 h-5 theme-icon-light"
+                >
+                  <path
+                    d="M10 2a.75.75 0 0 1 .75.75v1.5a.75.75 0 0 1-1.5 0v-1.5A.75.75 0 0 1 10 2ZM10 15a.75.75 0 0 1 .75.75v1.5a.75.75 0 0 1-1.5 0v-1.5A.75.75 0 0 1 10 15ZM10 7a3 3 0 1 0 0 6 3 3 0 0 0 0-6ZM15.657 5.404a.75.75 0 1 0-1.06-1.06l-1.061 1.06a.75.75 0 0 0 1.06 1.06l1.06-1.06ZM6.464 14.596a.75.75 0 1 0-1.06-1.06l-1.06 1.06a.75.75 0 0 0 1.06 1.06l1.06-1.06ZM18 10a.75.75 0 0 1-.75.75h-1.5a.75.75 0 0 1 0-1.5h1.5A.75.75 0 0 1 18 10ZM5 10a.75.75 0 0 1-.75.75h-1.5a.75.75 0 0 1 0-1.5h1.5A.75.75 0 0 1 5 10ZM14.596 15.657a.75.75 0 0 0 1.06-1.06l-1.06-1.061a.75.75 0 1 0-1.06 1.06l1.06 1.06ZM5.404 6.464a.75.75 0 0 0 1.06-1.06l-1.06-1.06a.75.75 0 1 0-1.061 1.06l1.06 1.06Z"
+                  />
+                </svg>
+              </button>
+            </li>
           </ul>
         </div>
       </div>
@@ -103,7 +136,7 @@ defmodule ErrorTracker.Web.Layouts do
     <li>
       <a
         href={@to}
-        class="whitespace-nowrap flex-0 block py-2 px-3 rounded-lg text-white hover:text-white hover:bg-gray-700 md:hover:bg-transparent md:border-0 md:hover:text-sky-500"
+        class="whitespace-nowrap flex-0 block py-2 px-3 rounded-lg text-white light:text-gray-900 hover:text-white light:hover:text-gray-900 hover:bg-gray-700 light:hover:bg-gray-200 md:hover:bg-transparent md:border-0 md:hover:text-sky-500"
         {@rest}
       >
         {render_slot(@inner_block)}
diff --git a/lib/error_tracker/web/components/layouts/root.html.heex b/lib/error_tracker/web/components/layouts/root.html.heex
@@ -25,7 +25,7 @@
     </script>
   </head>
 
-  <body class="bg-gray-800 text-white">
+  <body id="body" class="bg-gray-800 text-white" phx-hook="ThemeInit">
     {@inner_content}
   </body>
 </html>
diff --git a/lib/error_tracker/web/live/dashboard.html.heex b/lib/error_tracker/web/live/dashboard.html.heex
@@ -9,28 +9,28 @@
     value={@search_form[:reason].value}
     type="text"
     placeholder="Error"
-    class="border text-sm rounded-lg block p-2.5 bg-gray-700 border-gray-600 placeholder-gray-400 text-white focus:ring-blue-500 focus:border-blue-500"
+    class="border text-sm rounded-lg block p-2.5 bg-gray-700 light:bg-white border-gray-600 light:border-gray-300 placeholder-gray-400 text-white light:text-gray-900 focus:ring-blue-500 focus:border-blue-500"
     phx-debounce
   />
   <input
     name={@search_form[:source_line].name}
     value={@search_form[:source_line].value}
     type="text"
     placeholder="Source line"
-    class="border text-sm rounded-lg block p-2.5 bg-gray-700 border-gray-600 placeholder-gray-400 text-white focus:ring-blue-500 focus:border-blue-500"
+    class="border text-sm rounded-lg block p-2.5 bg-gray-700 light:bg-white border-gray-600 light:border-gray-300 placeholder-gray-400 text-white light:text-gray-900 focus:ring-blue-500 focus:border-blue-500"
     phx-debounce
   />
   <input
     name={@search_form[:source_function].name}
     value={@search_form[:source_function].value}
     type="text"
     placeholder="Source function"
-    class="border text-sm rounded-lg block p-2.5 bg-gray-700 border-gray-600 placeholder-gray-400 text-white focus:ring-blue-500 focus:border-blue-500"
+    class="border text-sm rounded-lg block p-2.5 bg-gray-700 light:bg-white border-gray-600 light:border-gray-300 placeholder-gray-400 text-white light:text-gray-900 focus:ring-blue-500 focus:border-blue-500"
     phx-debounce
   />
   <select
     name={@search_form[:status].name}
-    class="border text-sm rounded-lg block p-2.5 bg-gray-700 border-gray-600 placeholder-gray-400 text-white focus:ring-blue-500 focus:border-blue-500"
+    class="border text-sm rounded-lg block p-2.5 bg-gray-700 light:bg-white border-gray-600 light:border-gray-300 placeholder-gray-400 text-white light:text-gray-900 focus:ring-blue-500 focus:border-blue-500"
   >
     <option value="" selected={@search_form[:status].value == ""}>All</option>
     <option value="unresolved" selected={@search_form[:status].value == "unresolved"}>
@@ -42,9 +42,9 @@
   </select>
 </.form>
 
-<div class="relative overflow-x-auto shadow-md sm:rounded-lg ring-1 ring-gray-900">
-  <table class="w-full text-sm text-left rtl:text-right text-gray-400 table-fixed">
-    <thead class="text-xs uppercase bg-gray-900">
+<div class="relative overflow-x-auto shadow-md sm:rounded-lg ring-1 ring-gray-900 light:ring-gray-200">
+  <table class="w-full text-sm text-left rtl:text-right text-gray-400 light:text-gray-500 table-fixed">
+    <thead class="text-xs uppercase bg-gray-900 light:bg-gray-100">
       <tr>
         <th scope="col" class="px-4 pr-2 w-72">Error</th>
         <th scope="col" class="px-4 py-3 w-72">Occurrences</th>
@@ -60,9 +60,9 @@
       </tr>
       <tr
         :for={error <- @errors}
-        class="border-b bg-gray-400/10 border-y border-gray-900 hover:bg-gray-800/60 last-of-type:border-b-0"
+        class="border-b bg-gray-400/10 light:bg-gray-50 border-y border-gray-900 light:border-gray-200 hover:bg-gray-800/60 light:hover:bg-gray-100 last-of-type:border-b-0"
       >
-        <td scope="row" class="px-4 py-4 font-medium text-white relative">
+        <td scope="row" class="px-4 py-4 font-medium text-white light:text-gray-900 relative">
           <.link navigate={error_path(@socket, error, @search)} class="absolute inset-1">
             <span class="sr-only">({sanitize_module(error.kind)}) {error.reason}</span>
           </.link>
@@ -71,7 +71,7 @@
           </p>
           <p
             :if={ErrorTracker.Error.has_source_info?(error)}
-            class="whitespace-nowrap text-ellipsis overflow-hidden font-normal text-gray-400"
+            class="whitespace-nowrap text-ellipsis overflow-hidden font-normal text-gray-400 light:text-gray-500"
           >
             {sanitize_module(error.source_function)}
             <br />
diff --git a/lib/error_tracker/web/live/show.html.heex b/lib/error_tracker/web/live/show.html.heex
@@ -5,7 +5,7 @@
 </div>
 
 <div id="header">
-  <p class="text-sm uppercase font-semibold text-gray-400">
+  <p class="text-sm uppercase font-semibold text-gray-400 light:text-gray-500">
     Error #{@error.id} @ {format_datetime(@occurrence.inserted_at)}
   </p>
   <h1 class="my-1 text-2xl w-full font-semibold whitespace-nowrap text-ellipsis overflow-hidden">
@@ -16,44 +16,44 @@
 </div>
 
 <div class="grid grid-cols-1 md:grid-cols-4 md:space-x-3 mt-6 gap-2">
-  <div class="md:col-span-3 md:border-r md:border-gray-600 space-y-8 pr-5">
+  <div class="md:col-span-3 md:border-r md:border-gray-600 light:md:border-gray-300 space-y-8 pr-5">
     <.section title="Full message">
-      <pre class="overflow-auto p-4 rounded-lg bg-gray-300/10 border border-gray-900"><%= @occurrence.reason %></pre>
+      <pre class="overflow-auto p-4 rounded-lg bg-gray-300/10 light:bg-gray-100 border border-gray-900 light:border-gray-200"><%= @occurrence.reason %></pre>
     </.section>
 
     <.section :if={ErrorTracker.Error.has_source_info?(@error)} title="Source">
-      <pre class="overflow-auto text-sm p-4 rounded-lg bg-gray-300/10 border border-gray-900">
+      <pre class="overflow-auto text-sm p-4 rounded-lg bg-gray-300/10 light:bg-gray-100 border border-gray-900 light:border-gray-200">
         <%= sanitize_module(@error.source_function) %>
         <%= @error.source_line %></pre>
     </.section>
 
     <.section :if={@occurrence.breadcrumbs != []} title="Bread crumbs">
-      <div class="relative overflow-x-auto shadow-md sm:rounded-lg ring-1 ring-gray-900">
-        <table class="w-full text-sm text-gray-400 table-fixed">
+      <div class="relative overflow-x-auto shadow-md sm:rounded-lg ring-1 ring-gray-900 light:ring-gray-200">
+        <table class="w-full text-sm text-gray-400 light:text-gray-500 table-fixed">
           <tr
             :for={
               {breadcrumb, index} <-
                 @occurrence.breadcrumbs |> Enum.reverse() |> Enum.with_index()
             }
-            class="border-b bg-gray-400/10 border-gray-900 last:border-b-0"
+            class="border-b bg-gray-400/10 light:bg-gray-50 border-gray-900 light:border-gray-200 last:border-b-0"
           >
-            <td class="w-11 pl-2 py-4 font-medium text-white relative text-right">
+            <td class="w-11 pl-2 py-4 font-medium text-white light:text-gray-900 relative text-right">
               {length(@occurrence.breadcrumbs) - index}.
             </td>
-            <td class="px-2 py-4 font-medium text-white relative">{breadcrumb}</td>
+            <td class="px-2 py-4 font-medium text-white light:text-gray-900 relative">{breadcrumb}</td>
           </tr>
         </table>
       </div>
     </.section>
 
     <.section :if={@occurrence.stacktrace.lines != []} title="Stacktrace">
-      <div class="p-4 bg-gray-300/10 border border-gray-900 rounded-lg">
+      <div class="p-4 bg-gray-300/10 light:bg-gray-100 border border-gray-900 light:border-gray-200 rounded-lg">
         <div class="w-full mb-4">
           <label class="flex justify-end">
             <input
               type="checkbox"
               id="show-app-frames"
-              class="ml-2 mr-2 mb-1 mt-1 inline-block text-sky-600 rounded focus:ring-sky-600 ring-offset-gray-800 focus:ring-2 bg-gray-700 border-gray-600"
+              class="ml-2 mr-2 mb-1 mt-1 inline-block text-sky-600 rounded focus:ring-sky-600 ring-offset-gray-800 light:ring-offset-white focus:ring-2 bg-gray-700 light:bg-white border-gray-600 light:border-gray-300"
               phx-click={JS.toggle(to: "#stacktrace tr:not([data-app=#{@app}])")}
             />
             <span class="text-md inline-block">
@@ -81,20 +81,20 @@
     <.section title="Context">
       <pre
         id="context"
-        class="overflow-auto text-sm p-4 rounded-lg bg-gray-300/10 border border-gray-900"
+        class="overflow-auto text-sm p-4 rounded-lg bg-gray-300/10 light:bg-gray-100 border border-gray-900 light:border-gray-200"
         phx-hook="JsonPrettyPrint"
       >
         <%= ErrorTracker.__default_json_encoder__().encode_to_iodata!(@occurrence.context) %>
       </pre>
     </.section>
   </div>
 
-  <div class="px-3 md:pl-0 space-y-8">
+  <div class="px-3 md:pl-0 space-y-8 light:md:border-gray-300">
     <.section title={"Occurrence (#{@total_occurrences} total)"}>
       <form phx-change="occurrence_navigation">
         <select
           name="occurrence_id"
-          class="w-full border text-sm rounded-lg block p-2.5 bg-gray-700 border-gray-600 placeholder-gray-400 text-white focus:ring-blue-500 focus:border-blue-500"
+          class="w-full border text-sm rounded-lg block p-2.5 bg-gray-700 light:bg-white border-gray-600 light:border-gray-300 placeholder-gray-400 text-white light:text-gray-900 focus:ring-blue-500 focus:border-blue-500"
         >
           <option
             :for={occurrence <- @occurrences}
diff --git a/priv/static/app.css b/priv/static/app.css
diff --git a/priv/static/app.js b/priv/static/app.js

Original file line number	Diff line number	Diff line change
`@@ -17,6 +17,7 @@ module.exports = {`
`17`	`17`	`plugin(({addVariant}) => addVariant('phx-no-feedback', ['&.phx-no-feedback', '.phx-no-feedback &'])),`
`18`	`18`	`plugin(({addVariant}) => addVariant('phx-click-loading', ['&.phx-click-loading', '.phx-click-loading &'])),`
`19`	`19`	`plugin(({addVariant}) => addVariant('phx-submit-loading', ['&.phx-submit-loading', '.phx-submit-loading &'])),`
`20`		`- plugin(({addVariant}) => addVariant('phx-change-loading', ['&.phx-change-loading', '.phx-change-loading &']))`
	`20`	`+ plugin(({addVariant}) => addVariant('phx-change-loading', ['&.phx-change-loading', '.phx-change-loading &'])),`
	`21`	`+ plugin(({addVariant}) => addVariant('light', 'body.light-theme &'))`
`21`	`22`	`]`
`22`	`23`	`}`