diff options
| author | Kamal Wickramanayake <kamal@inbox.lk> | 2026-07-05 08:39:34 +0530 |
|---|---|---|
| committer | Kamal Wickramanayake <kamal@inbox.lk> | 2026-07-05 08:39:34 +0530 |
| commit | 3a6f7be667f228f62e426c58ce207a14b50b2a6c (patch) | |
| tree | ab6b995d97929432c5e786c16f290e3204365340 /tailwindcss/02-vite/index.html | |
| parent | 8ab27073ece9163510e63763ca4cf83a9d9c252b (diff) | |
Tailwind CSS theme toggle implemented
Diffstat (limited to 'tailwindcss/02-vite/index.html')
| -rw-r--r-- | tailwindcss/02-vite/index.html | 12 |
1 files changed, 12 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 @@ © 2026 My Website. All rights reserved. </footer> </div> + <script src="/src/main.js"></script> </body> </html>
\ No newline at end of file |