Merge pull request #26 from substancelab/dark_mode

koppen · web-flow · commit 25c51824a303 · 2025-08-20T08:28:31.000+02:00
Add dark mode to the demo site
diff --git a/demo/app/assets/tailwind/application.css b/demo/app/assets/tailwind/application.css
@@ -7,6 +7,8 @@
 /* Include CSS classes used by the components in the final CSS */
 @import "../builds/tailwind/flowbite_components";
 
+@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));
+
 footer a {
   @apply font-medium text-blue-600 dark:text-blue-500 hover:underline;
 }
diff --git a/demo/app/views/layouts/application.html.erb b/demo/app/views/layouts/application.html.erb
@@ -21,7 +21,7 @@
     <%= stylesheet_link_tag :app %>
   </head>
 
-  <body>
+  <body class="bg-white text-gray-800 dark:bg-gray-900 dark:text-gray-400">
     <header>
       <nav class="bg-white border-gray-200 dark:bg-gray-900">
         <div class="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
@@ -44,6 +44,18 @@
               <li>
                 <%= link_to("GitHub", "https://github.com/substancelab/flowbite-components", class: "block py-2 px-3 text-gray-900 rounded-sm hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent") %>
               </li>
+              <li>
+                <button data-theme-toggle="dark" class="dark:hidden">
+                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-6">
+                    <path fill-rule="evenodd" d="M9.528 1.718a.75.75 0 0 1 .162.819A8.97 8.97 0 0 0 9 6a9 9 0 0 0 9 9 8.97 8.97 0 0 0 3.463-.69.75.75 0 0 1 .981.98 10.503 10.503 0 0 1-9.694 6.46c-5.799 0-10.5-4.7-10.5-10.5 0-4.368 2.667-8.112 6.46-9.694a.75.75 0 0 1 .818.162Z" clip-rule="evenodd" />
+                  </svg>
+                </button>
+                <button data-theme-toggle="light" class="hidden dark:block">
+                  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 18v-5.25m0 0a6.01 6.01 0 0 0 1.5-.189m-1.5.189a6.01 6.01 0 0 1-1.5-.189m3.75 7.478a12.06 12.06 0 0 1-4.5 0m3.75 2.383a14.406 14.406 0 0 1-3 0M14.25 18v-.192c0-.983.658-1.823 1.508-2.316a7.5 7.5 0 1 0-7.517 0c.85.493 1.509 1.333 1.509 2.316V18" />
+                  </svg>
+                </button>
+              </li>
             </ul>
           </div>
         </div>
@@ -56,7 +68,7 @@
       </article>
     </main>
 
-    <footer class="mt-28 px-5 py-5 flex border-t-2 border-gray-200 dark:border-gray-70">
+    <footer class="mt-28 px-5 py-5 flex border-t-2 border-gray-200 dark:border-gray-700">
       <div class="space-y-5">
         <div class="flex space-x-5">
           <%= link_to("GitHub", "https://github.com/substancelab/flowbite-components") %>
@@ -74,5 +86,22 @@
         </div>
       </div>
     </footer>
+
+    <script>
+      function setTheme(theme) {
+        document.documentElement.setAttribute('data-theme', theme);
+        localStorage.setItem("theme", theme);
+      }
+      setTheme(localStorage.getItem('theme') || 'light');
+
+      document.querySelectorAll("[data-theme-toggle]").forEach((element) => {
+        element.addEventListener("click", () => {
+          const theme = element.getAttribute("data-theme-toggle");
+          if (theme) {
+            setTheme(theme);
+          }
+        });
+      });
+    </script>
   </body>
 </html>

Original file line number	Diff line number	Diff line change
`@@ -7,6 +7,8 @@`
`7`	`7`	`/* Include CSS classes used by the components in the final CSS */`
`8`	`8`	`@import "../builds/tailwind/flowbite_components";`
`9`	`9`
	`10`	`+@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));`
	`11`	`+`
`10`	`12`	`footer a {`
`11`	`13`	`@apply font-medium text-blue-600 dark:text-blue-500 hover:underline;`
`12`	`14`	`}`