Merge pull request #4 from hamza-m-masood/merge-portfolio

fixed theme switcher and tags
hamza-m-masood · Aug 18, 2024 · fc92a98 · fc92a98
2 parents d79ba96 + ddd045a
commit fc92a98
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 19 deletions.
diff --git a/src/components/ThemeSwitch.astro b/src/components/ThemeSwitch.astro
@@ -3,18 +3,11 @@ import Theme from "@/icons/themeSwitch.astro";
 ---
 
 <div class="no-print inline-flex items-center">
-	<!-- <div class="flex items-center gap-1">
-		<Theme />
-		<select name="themeSwitch" id="themeSwitch" class="block w-full rounded-md border-0 py-1.5 pl-3 pr-10 text-gray-900 dark:text-gray-100 dark:ring-gray-700 sm:text-sm sm:leading-6">
-			<option value="system">System</option>
-			<option value="dark">Dark</option>
-			<option value="light">Light</option>
-		</select>
-	</div> -->
-
 	<div class="group/theme flex items-center gap-2">
-		<label for="themeSwitch" class="flex items-center gap-1 text-sm font-medium leading-6 text-skin-base transition-transform ease-in-out group-hover/theme:rotate-45"> <Theme /></label>
-		<select id="themeSwitch" name="themeSwitch" class="focus:ring-skin-hue ring-skin-muted block w-full rounded-md border-0 py-1.5 pl-3 pr-10 text-skin-base ring-1 ring-inset focus:ring-2 sm:text-sm sm:leading-6">
+		<label for="themeSwitch" class="flex items-center gap-1 text-sm font-medium leading-6 text-skin-base transition-transform ease-in-out group-hover/theme:rotate-45">
+			<Theme />
+		</label>
+		<select id="themeSwitch" name="themeSwitch" class="focus:ring-skin-hue ring-skin-muted block w-full rounded-md border-0 py-1.5 pl-3 pr-10 ring-1 ring-inset focus:ring-2 sm:text-sm sm:leading-6 appearance-none">
 			<option value="system">System</option>
 			<option value="dark">Dark</option>
 			<option value="light">Light</option>
@@ -28,28 +21,38 @@ import Theme from "@/icons/themeSwitch.astro";
 	</style>
 
 	<script>
-		const select = document.getElementById("themeSwitch") as HTMLSelectElement;
+		const select = document.getElementById("themeSwitch");
 		const theme = localStorage.getItem("theme");
 		const systemTheme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
 
+		function applyThemeClasses(theme) {
+			if (theme === "dark") {
+				select.classList.add("bg-gray-900", "text-gray-100");
+				select.classList.remove("bg-white", "text-gray-900");
+			} else {
+				select.classList.add("bg-white", "text-gray-900");
+				select.classList.remove("bg-gray-900", "text-gray-100");
+			}
+		}
+
 		if (theme !== null) {
 			select.value = theme;
+			applyThemeClasses(theme);
 		} else {
 			select.value = systemTheme;
+			applyThemeClasses(systemTheme);
 		}
 
-		function updateTheme(value: string) {
+		function updateTheme(value) {
 			const theme = value === "system" ? systemTheme : value;
 			document.documentElement.classList.remove("light", "dark");
 			document.documentElement.classList.add(theme);
 			localStorage.setItem("theme", value);
+			applyThemeClasses(theme);
 		}
 
-		updateTheme(select.value);
-
-		select.addEventListener("change", (event: Event) => {
-			const select = event.target as HTMLSelectElement;
-			updateTheme(select.value);
+		select.addEventListener("change", (event) => {
+			updateTheme(event.target.value);
 		});
 	</script>
 </div>
diff --git a/src/layouts/PostSingle.astro b/src/layouts/PostSingle.astro
@@ -101,7 +101,7 @@ const { title, description, authors, categories, image, date, tags } =
           tags.map((tag: string) => (
             <li class="inline-block">
               <a
-                href={`/tags/${slugify(tag)}`}
+            href={`/blog/tags/${slugify(tag)}`}
                 class="block rounded-lg bg-theme-light px-4 py-2 font-semibold text-dark text-sm hover:text-primary transition duration-300"
               >
                 #{humanize(tag)}