fix(theme): 🩹 Fix change theme error

AlexTorresDev · Nov 19, 2023 · 6483c53 · 6483c53
1 parent 06faf7c
commit 6483c53
Show file tree

Hide file tree

Showing 5 changed files with 67 additions and 44 deletions.
diff --git a/src/components/BaseHead.astro b/src/components/BaseHead.astro
@@ -45,13 +45,18 @@ const { title, description, image = '/images/social_img.webp' } = Astro.props
 ></script>
 
 <script is:inline>
-	if (
-		localStorage.getItem('color-theme') === 'dark' ||
-		(!('color-theme' in localStorage) &&
-			window.matchMedia('(prefers-color-scheme: dark)').matches)
-	) {
-		document.documentElement.classList.add('dark')
-	} else {
-		document.documentElement.classList.remove('dark')
+	const checkTheme = () => {
+		if (
+			localStorage.getItem('color-theme') === 'dark' ||
+			(!('color-theme' in localStorage) &&
+				window.matchMedia('(prefers-color-scheme: dark)').matches)
+		) {
+			document.documentElement.classList.add('dark')
+		} else {
+			document.documentElement.classList.remove('dark')
+		}
 	}
+
+	checkTheme()
+	document.addEventListener('astro:after-swap', checkTheme)
 </script>
diff --git a/src/components/Cards/Card.astro b/src/components/Cards/Card.astro
@@ -30,7 +30,7 @@ const { title, img, desc, url, badge, tags, target = '_blank' } = Astro.props
 			{
 				tags &&
 					tags.map((tag: string) => (
-						<span class="text-xs font-medium me-2 px-2.5 py-0.5 rounded border-[2px] border-neutral-100 text-neutral-800 dark:border-neutral-800 dark:text-neutral-300">
+						<span class="text-xs font-medium me-2 px-2.5 py-0.5 rounded border-[2px] border-neutral-100 text-neutral-700 dark:border-neutral-700 dark:text-neutral-300">
 							{tag}
 						</span>
 					))

diff --git a/src/components/Cards/HorizontalCard.astro b/src/components/Cards/HorizontalCard.astro
@@ -74,7 +74,7 @@ const {
 			{
 				tags &&
 					tags.map((tag: string) => (
-						<span class="text-xs font-medium me-2 px-2.5 py-0.5 rounded border-[2px] border-neutral-200 text-neutral-800 dark:border-neutral-800 dark:text-neutral-300">
+						<span class="text-xs font-medium me-2 px-2.5 py-0.5 rounded border-[2px] border-neutral-200 text-neutral-700 dark:border-neutral-600 dark:text-neutral-300">
 							{tag}
 						</span>
 					))

diff --git a/src/components/Header/Navbar.astro b/src/components/Header/Navbar.astro
@@ -30,7 +30,7 @@ const currentItem = currentPath.replace(/\/blog\/?[\w-_]*/, '/blog')
 	id="navbar-sticky"
 >
 	<ul
-		class="flex flex-col p-4 md:p-0 mt-4 font-medium border border-neutral-100 rounded-lg bg-neutral-50 md:space-x-8 rtl:space-x-reverse md:flex-row md:mt-0 md:border-0 md:bg-white dark:bg-neutral-800 md:dark:bg-neutral-800 dark:border-neutral-700"
+		class="flex flex-col p-4 md:p-0 mt-4 font-medium md:space-x-8 rtl:space-x-reverse md:flex-row md:mt-0"
 	>
 		{
 			menuItems.map((item) => (

diff --git a/src/components/Header/ThemeSwitcher.astro b/src/components/Header/ThemeSwitcher.astro
@@ -3,6 +3,8 @@
 	type="button"
 	aria-label="Cambiar tema"
 	class="text-neutral-500 dark:text-neutral-400 hover:bg-neutral-100 dark:hover:bg-neutral-700 focus:outline-none rounded-lg text-sm p-2.5"
+	data-tooltip-target="tooltip-switch-theme"
+	data-tooltip-placement="left"
 >
 	<svg
 		id="theme-toggle-dark-icon"
@@ -28,44 +30,60 @@
 	</svg>
 </button>
 
+<div
+	id="tooltip-switch-theme"
+	role="tooltip"
+	class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white bg-neutral-700 rounded-lg shadow-sm opacity-0 tooltip dark:bg-neutral-50 dark:text-black"
+>
+	Cambiar tema
+	<div class="tooltip-arrow" data-popper-arrow></div>
+</div>
+
 <script is:inline>
-	const themeToggleDarkIcon = document.getElementById('theme-toggle-dark-icon')
-	const themeToggleLightIcon = document.getElementById(
-		'theme-toggle-light-icon'
-	)
+	const switchTheme = () => {
+		const themeToggleDarkIcon = document.getElementById(
+			'theme-toggle-dark-icon'
+		)
+		const themeToggleLightIcon = document.getElementById(
+			'theme-toggle-light-icon'
+		)
 
-	if (
-		localStorage.getItem('color-theme') === 'dark' ||
-		(!('color-theme' in localStorage) &&
-			window.matchMedia('(prefers-color-scheme: dark)').matches)
-	) {
-		themeToggleLightIcon.classList.remove('hidden')
-	} else {
-		themeToggleDarkIcon.classList.remove('hidden')
-	}
+		if (
+			localStorage.getItem('color-theme') === 'dark' ||
+			(!('color-theme' in localStorage) &&
+				window.matchMedia('(prefers-color-scheme: dark)').matches)
+		) {
+			themeToggleLightIcon.classList.remove('hidden')
+		} else {
+			themeToggleDarkIcon.classList.remove('hidden')
+		}
 
-	const themeToggleBtn = document.getElementById('theme-toggle')
+		const themeToggleBtn = document.getElementById('theme-toggle')
 
-	themeToggleBtn.addEventListener('click', function () {
-		themeToggleDarkIcon.classList.toggle('hidden')
-		themeToggleLightIcon.classList.toggle('hidden')
+		themeToggleBtn.addEventListener('click', () => {
+			themeToggleDarkIcon.classList.toggle('hidden')
+			themeToggleLightIcon.classList.toggle('hidden')
 
-		if (localStorage.getItem('color-theme')) {
-			if (localStorage.getItem('color-theme') === 'light') {
-				document.documentElement.classList.add('dark')
-				localStorage.setItem('color-theme', 'dark')
+			if (localStorage.getItem('color-theme')) {
+				if (localStorage.getItem('color-theme') === 'light') {
+					document.documentElement.classList.add('dark')
+					localStorage.setItem('color-theme', 'dark')
+				} else {
+					document.documentElement.classList.remove('dark')
+					localStorage.setItem('color-theme', 'light')
+				}
 			} else {
-				document.documentElement.classList.remove('dark')
-				localStorage.setItem('color-theme', 'light')
+				if (document.documentElement.classList.contains('dark')) {
+					document.documentElement.classList.remove('dark')
+					localStorage.setItem('color-theme', 'light')
+				} else {
+					document.documentElement.classList.add('dark')
+					localStorage.setItem('color-theme', 'dark')
+				}
 			}
-		} else {
-			if (document.documentElement.classList.contains('dark')) {
-				document.documentElement.classList.remove('dark')
-				localStorage.setItem('color-theme', 'light')
-			} else {
-				document.documentElement.classList.add('dark')
-				localStorage.setItem('color-theme', 'dark')
-			}
-		}
-	})
+		})
+	}
+
+	switchTheme()
+	document.addEventListener('astro:after-swap', switchTheme)
 </script>