3 files changed, 25 insertions, 0 deletions
diff --git a/tailwindcss/02-vite/index.html b/tailwindcss/02-vite/index.html
index 8107c39..f44f5a1 100644
--- a/tailwindcss/02-vite/index.html
+++ b/tailwindcss/02-vite/index.html
@@ -6,6 +6,16 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link href="/src/style.css" rel="stylesheet">
   <title>Tailwind CSS Starter</title>
+  
+  <!-- Prevent screen flashing on initial load -->
+  <script>
+    if (localStorage.getItem('theme') === 'dark' || 
+        (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+      document.documentElement.classList.add('dark');
+    } else {
+      document.documentElement.classList.remove('dark');
+    }
+  </script>
 </head>
 
 <body class="transition-colors duration-300">
@@ -16,6 +26,7 @@
         <a href="#">Home</a>
         <a href="#">Blog</a>
         <a href="#">Contact</a>
+        <a href="#" id="theme-toggle">Toggle Theme</a>
       </nav>
     </div>
 
@@ -71,6 +82,7 @@
       &copy; 2026 My Website. All rights reserved.
     </footer>
   </div>
+  <script src="/src/main.js"></script>
 </body>
 
 </html>
 \ No newline at end of file
diff --git a/tailwindcss/02-vite/src/main.js b/tailwindcss/02-vite/src/main.js
new file mode 100644
index 0000000..9a69e49
--- /dev/null
+++ b/tailwindcss/02-vite/src/main.js
@@ -0,0 +1,10 @@
+const toggleButton = document.querySelector('#theme-toggle');
+
+toggleButton.addEventListener('click', () => {
+  // Toggle the class on the <html> tag
+  document.documentElement.classList.toggle('dark');
+  
+  // Optional: Save preference to localStorage
+  const isDark = document.documentElement.classList.contains('dark');
+  localStorage.setItem('theme', isDark ? 'dark' : 'light');
+});
diff --git a/tailwindcss/02-vite/src/style.css b/tailwindcss/02-vite/src/style.css
index 0b094f7..87d049b 100644
--- a/tailwindcss/02-vite/src/style.css
+++ b/tailwindcss/02-vite/src/style.css
@@ -1,5 +1,8 @@
 @import "tailwindcss";
 
+/* Forcs Tailwind to look for a .dark class up the HTML tree instead of checking the user's operating system preferences. */
+@custom-variant dark (&:where(.dark, .dark *));
+
 /* Base layer customization with Tailwind CSS classes - applies to elements like p, a, img */
 @layer base {
   a {