Add basic theme toggle

Author: koppen

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;
 }

demo/app/views/layouts/application.html.erb

@@ -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>
@@ -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>