From 3a6f7be667f228f62e426c58ce207a14b50b2a6c Mon Sep 17 00:00:00 2001 From: Kamal Wickramanayake Date: Sun, 5 Jul 2026 08:39:34 +0530 Subject: Tailwind CSS theme toggle implemented --- tailwindcss/02-vite/index.html | 12 ++++++++++++ tailwindcss/02-vite/src/main.js | 10 ++++++++++ tailwindcss/02-vite/src/style.css | 3 +++ 3 files changed, 25 insertions(+) create mode 100644 tailwindcss/02-vite/src/main.js (limited to 'tailwindcss/02-vite') 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 @@ Tailwind CSS Starter + + + @@ -16,6 +26,7 @@ Home Blog Contact + Toggle Theme @@ -71,6 +82,7 @@ © 2026 My Website. All rights reserved. + \ 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 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 { -- cgit v1.2.3