feat: add theme change in mobile mode

src/components/layout/Header.astro

@@ -158,7 +158,7 @@ import { Image } from 'astro:assets'
 					href='/categories'
 					class={`block py-2 text-[1.05rem] font-medium  ${Astro.url.pathname.startsWith('/categories') ? 'text-green-400' : ''}`}
 				>
-					Cats.
+					Categories
 				</a>
 				<a
 					href='/tags'
@@ -184,6 +184,32 @@ import { Image } from 'astro:assets'
 				>
 					Friends
 				</a>
+				<button
+					id='mobileToggleDarkMode'
+					class='mt-2 flex w-full items-center py-2 text-[1.05rem] font-medium'
+				>
+					<span>Theme</span>
+					<svg
+						xmlns='http://www.w3.org/2000/svg'
+						width='32'
+						height='32'
+						viewBox='0 0 24 24'
+						class='ml-2 h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:hidden dark:-rotate-90 dark:scale-0'
+					><path
+						fill='currentColor'
+						d='M12 15q1.25 0 2.125-.875T15 12q0-1.25-.875-2.125T12 9q-1.25 0-2.125.875T9 12q0 1.25.875 2.125T12 15m0 1q-1.671 0-2.836-1.164T8 12q0-1.671 1.164-2.836T12 8q1.671 0 2.836 1.164T16 12q0 1.671-1.164 2.836T12 16m-7-3.5H1.5v-1H5zm17.5 0H19v-1h3.5zM11.5 5V1.5h1V5zm0 17.5V19h1v3.5zM6.746 7.404l-2.16-2.098l.695-.744l2.111 2.134zM18.72 19.438l-2.117-2.14l.652-.702l2.16 2.098zM16.596 6.746l2.098-2.16l.744.695l-2.134 2.111zM4.562 18.72l2.14-2.117l.663.652l-2.078 2.179zM12 12'
+					></path></svg>
+					<svg
+						xmlns='http://www.w3.org/2000/svg'
+						width='32'
+						height='32'
+						viewBox='0 0 24 24'
+						class='ml-2 hidden h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:block dark:rotate-0 dark:scale-100'
+					><path
+						fill='currentColor'
+						d='M12.058 20q-3.334 0-5.667-2.333Q4.058 15.333 4.058 12q0-3.038 1.98-5.27Q8.02 4.5 10.942 4.097q.081 0 .159.006t.153.017q-.506.706-.801 1.57q-.295.865-.295 1.811q0 2.667 1.866 4.533q1.867 1.867 4.534 1.867q.952 0 1.813-.295q.862-.295 1.548-.801q.012.075.018.153q.005.078.005.158q-.384 2.923-2.615 4.904T12.057 20'
+					></path></svg>
+				</button>
 			</div>
 		</div>
 	</nav>
@@ -196,9 +222,9 @@ import { Image } from 'astro:assets'
 
 	function setupDarkModeToggle() {
 		const toggleDarkModeButton = document.getElementById('toggleDarkMode')
-		if (!toggleDarkModeButton) return
+		const mobileToggleDarkMode = document.getElementById('mobileToggleDarkMode')
 		
-		toggleDarkModeButton.addEventListener('click', () => {
+		function toggleTheme() {
 			const currentTheme = getCurrentTheme()
 			const newTheme = currentTheme === 'dark' ? 'light' : 'dark'
 			localStorage.setItem('theme', newTheme)
@@ -206,7 +232,15 @@ import { Image } from 'astro:assets'
 
 			// Dispatch theme change event
 			window.dispatchEvent(new CustomEvent('theme-change', { detail: { theme: newTheme } }))
-		})
+		}
+
+		if (toggleDarkModeButton) {
+			toggleDarkModeButton.addEventListener('click', toggleTheme)
+		}
+
+		if (mobileToggleDarkMode) {
+			mobileToggleDarkMode.addEventListener('click', toggleTheme)
+		}
 	}
 
 	function setupMobileMenu() {

src/layouts/BlogPost.astro

@@ -48,7 +48,7 @@ const { headings } = await post.render()
 				</div>
 				<div
 					id='blog-gallery'
-					class='prose prose-base prose-zinc mt-12 text-muted-foreground dark:prose-invert prose-headings:font-medium prose-headings:text-foreground prose-headings:before:absolute prose-headings:before:-ms-4 prose-code:bg-green-200 prose-th:before:content-none prose-img:shadow dark:prose-code:bg-gray-800'
+					class='prose prose-base prose-zinc mt-12 text-muted-foreground dark:prose-invert prose-headings:font-medium prose-headings:text-foreground prose-headings:before:absolute prose-headings:before:-ms-4 prose-th:before:content-none prose-img:shadow'
 				>
 					<slot />
 				</div>