Merge pull request #47 from visini/add-dark-mode

fractaledmind · web-flow · commit 2a6f36aa4732 · 2025-06-03T11:46:13.000+02:00
Add dark mode to dashboard
diff --git a/app/views/layouts/litestream/_style.html b/app/views/layouts/litestream/_style.html
@@ -801,4 +801,42 @@
   .hover\:underline:hover {
     text-decoration-line: underline;
   }
+  @media (prefers-color-scheme: dark) {
+    .dark\:border-gray-800 {
+      --tw-border-opacity: 1;
+      border-color: rgb(31 41 55 / var(--tw-border-opacity));
+    }
+    .dark\:bg-gray-900 {
+      --tw-bg-opacity: 1;
+      background-color: rgb(17 24 39 / var(--tw-bg-opacity));
+    }
+    .dark\:bg-green-900 {
+      --tw-bg-opacity: 1;
+      background-color: rgb(20 83 45 / var(--tw-bg-opacity));
+    }
+    .dark\:bg-red-900 {
+      --tw-bg-opacity: 1;
+      background-color: rgb(127 29 29 / var(--tw-bg-opacity));
+    }
+    .dark\:text-gray-100 {
+      --tw-text-opacity: 1;
+      color: rgb(243 244 246 / var(--tw-text-opacity));
+    }
+    .dark\:text-white {
+      --tw-text-opacity: 1;
+      color: rgb(255 255 255 / var(--tw-text-opacity));
+    }
+    .dark\:even\:bg-gray-800:nth-child(even) {
+      --tw-bg-opacity: 1;
+      background-color: rgb(31 41 55 / var(--tw-bg-opacity));
+    }
+    .dark\:hover\:bg-gray-900:hover {
+      --tw-bg-opacity: 1;
+      background-color: rgb(17 24 39 / var(--tw-bg-opacity));
+    }
+    .dark\:hover\:bg-gray-800:hover {
+      --tw-bg-opacity: 1;
+      background-color: rgb(31 41 55 / var(--tw-bg-opacity));
+    }
+  }
 </style>
diff --git a/app/views/layouts/litestream/application.html.erb b/app/views/layouts/litestream/application.html.erb
@@ -7,12 +7,12 @@
 
     <%= render "layouts/litestream/style" %>
   </head>
-  <body class="h-full flex flex-col">
+  <body class="h-full flex flex-col dark:bg-gray-900 dark:text-white">
     <main class="container mx-auto max-w-4xl mt-4 px-2 grow">
       <%= content_for?(:content) ? yield(:content) : yield %>
     </main>
 
-    <footer class="container mx-auto mt-24 flex items-center justify-between border-t px-2 py-4 text-base">
+    <footer class="container mx-auto mt-24 flex items-center justify-between border-t dark:border-gray-800 px-2 py-4 text-base">
       <p>
         <code><strong>Litestream</strong></code>&nbsp;&nbsp;|&nbsp;
         Made by <a href="https://twitter.com/fractaledmind" class="text-blue-500 hover:underline decoration-blue-500">@fractaledmind</a> and <a href="https://github.com/fractaledmind/litestream-ruby/graphs/contributors" class="text-blue-500 hover:underline decoration-blue-500">friends</a>! Want to help? It's <a href="https://github.com/fractaledmind/litestream-ruby" class="text-blue-500 hover:underline decoration-blue-500">open source</a>!
@@ -22,15 +22,15 @@
     <div class="fixed top-0 left-0 right-0 text-center py-2">
       <% if notice.present? %>
         <p id="notice"
-           class="py-2 px-3 bg-green-50 text-green-500 font-medium rounded-lg inline-block"
+           class="py-2 px-3 bg-green-50 dark:bg-green-900 text-green-500 font-medium rounded-lg inline-block"
            data-controller="fade">
           <%= notice.html_safe %>
         </p>
       <% end %>
 
       <% if alert.present? %>
         <p id="alert"
-           class="py-2 px-3 bg-red-50 text-red-500 font-medium rounded-lg inline-block"
+           class="py-2 px-3 bg-red-50 dark:bg-red-900 text-red-500 font-medium rounded-lg inline-block"
            data-controller="fade">
           <%= alert.html_safe %>
         </p>
diff --git a/app/views/litestream/processes/show.html.erb b/app/views/litestream/processes/show.html.erb
@@ -40,7 +40,7 @@
 <br>
 
 <section id="databases" class="">
-  <div class="mb-3 flex items-center justify-between border-b">
+  <div class="mb-3 flex items-center justify-between border-b dark:border-gray-800">
     <h2 class="text-2xl font-bold">Databases</h2>
     <p class="text-right">Total: <strong><%= @databases.size %></strong></p>
   </div>
@@ -59,7 +59,7 @@
         <section id="generations" class="ml-6">
           <% database['generations'].each do |generation| %>
             <details id="<%= generation['generation'] %>" open="open">
-              <summary class="cursor-pointer rounded p-2 hover:bg-gray-50">
+              <summary class="cursor-pointer rounded p-2 hover:bg-gray-50 dark:hover:bg-gray-800">
                 <code><%= generation['generation'] %></code>
                 (<em><%= generation['lag'] %> lag</em>)
               </summary>
@@ -85,24 +85,24 @@
                     <table class="min-w-full divide-y divide-gray-300">
                       <thead>
                         <tr>
-                          <th scope="col" class="whitespace-nowrap px-2 py-2 text-left text-sm font-semibold text-gray-900">Created at</th>
-                          <th scope="col" class="whitespace-nowrap px-2 py-2 text-right text-sm font-semibold text-gray-900">Index</th>
-                          <th scope="col" class="whitespace-nowrap px-2 py-2 text-right text-sm font-semibold text-gray-900">Size</th>
+                          <th scope="col" class="whitespace-nowrap px-2 py-2 text-left text-sm font-semibold text-gray-900 dark:text-gray-100">Created at</th>
+                          <th scope="col" class="whitespace-nowrap px-2 py-2 text-right text-sm font-semibold text-gray-900 dark:text-gray-100">Index</th>
+                          <th scope="col" class="whitespace-nowrap px-2 py-2 text-right text-sm font-semibold text-gray-900 dark:text-gray-100">Size</th>
                         </tr>
                       </thead>
 
-                      <tbody class="bg-white">
+                      <tbody class="bg-white dark:bg-gray-900">
                         <% generation['snapshots'].each do |snapshot| %>
-                          <tr class="align-top even:bg-gray-50">
-                            <td scope="col" class="whitespace-nowrap px-2 py-2 text-sm text-gray-900">
+                          <tr class="align-top even:bg-gray-50 dark:even:bg-gray-800">
+                            <td scope="col" class="whitespace-nowrap px-2 py-2 text-sm text-gray-900 dark:text-gray-100">
                               <abbr title="<%= snapshot['created'] %>" class="underline decoration-dashed decoration-gray-500 cursor-help">
                                 <time datetime="<%= snapshot['created'] %>"><%= DateTime.parse(snapshot['created']).to_formatted_s(:db) %></time>
                               </abbr>
                             </td>
-                            <td scope="col" class="whitespace-nowrap px-2 py-2 text-sm text-gray-900 text-right">
+                            <td scope="col" class="whitespace-nowrap px-2 py-2 text-sm text-gray-900 dark:text-gray-100 text-right">
                               <%= snapshot['index'] %>
                             </td>
-                            <td scope="col" class="whitespace-nowrap px-2 py-2 text-sm text-gray-900 text-right">
+                            <td scope="col" class="whitespace-nowrap px-2 py-2 text-sm text-gray-900 dark:text-gray-100 text-right">
                               <%= number_to_human_size snapshot['size'] %>
                             </td>
                           </tr>
