Allow dark mode on demo

erimicel · erimicel · commit 19c71c716d3d · 2025-01-09T20:21:00.000Z
diff --git a/README.md b/README.md
@@ -81,8 +81,7 @@ npm install
 Modify the SCSS file in src/.scss. Build the CSS:
 
 ```bash
-npm run build       # Regular CSS with @apply classes
-npm run build:min   # Minified CSS
+npm run build:all   # Build all files and update demo as-well
 ```
 
 ## Contributing
diff --git a/docs/index.html b/docs/index.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" class="dark">
 
 <head>
   <meta charset="UTF-8">
@@ -152,17 +152,24 @@ <h2 class="mb-6 text-2xl font-semibold text-gray-800">
 
   <script>
     $(function () {
-        $('select').each(function () {
-          $(this).select2({
-            theme: 'tailwindcss-3',
-            width: $(this).data('width') ? $(this).data('width') : $(this).hasClass('w-100') ? '100%' : 'style',
-            placeholder: $(this).data('placeholder') || 'Select an option',
-            allowClear: Boolean($(this).data('allow-clear')),
-            closeOnSelect: !$(this).attr('multiple'),
-            tags: Boolean($(this).data('tags')),
-          });
+      // On page load or when changing themes, best to add inline in `head` to avoid FOUC
+      document.documentElement.classList.toggle(
+        'dark',
+        localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)
+      );
+
+      // Select2 init
+      $('select').each(function () {
+        $(this).select2({
+          theme: 'tailwindcss-3',
+          width: $(this).data('width') ? $(this).data('width') : $(this).hasClass('w-100') ? '100%' : 'style',
+          placeholder: $(this).data('placeholder') || 'Select an option',
+          allowClear: Boolean($(this).data('allow-clear')),
+          closeOnSelect: !$(this).attr('multiple'),
+          tags: Boolean($(this).data('tags')),
         });
       });
+    });
   </script>
 
 </body>
diff --git a/docs/tailwind.config.js b/docs/tailwind.config.js
@@ -1,5 +1,7 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
+  // The selector strategy replaced the class strategy in Tailwind CSS v3.4.1.
+  darkMode: 'selector',
   content: [
     './**/*.{html,js}',
   ],
