feat: update theme handling and improve icons

astro.config.ts

@@ -27,7 +27,7 @@ export default defineConfig({
 			themes: ["github-light", "github-dark"],
 			plugins: [pluginCollapsibleSections(), pluginLineNumbers()],
 			useDarkModeMediaQuery: false,
-			themeCssSelector: (theme) => `.${theme.name.split("-")[1]}`,
+			themeCssSelector: (theme) => `[data-theme="${theme.name.split("-")[1]}"]`,
 			defaultProps: {
 				wrap: true,
 				collapseStyle: "collapsible-auto",

src/components/Breadcrumbs.astro

@@ -27,7 +27,7 @@ const { items, class: className } = Astro.props;
   <BreadcrumbList>
     <BreadcrumbItem>
       <BreadcrumbLink href="/">
-        <Icon name="lucide:home" class="size-4" />
+        <Icon name="lucide:home" class="size-4 shrink-0" />
       </BreadcrumbLink>
     </BreadcrumbItem>
     {
@@ -38,15 +38,19 @@ const { items, class: className } = Astro.props;
             {index === items.length - 1 ? (
               <BreadcrumbPage>
                 <span class="flex items-center gap-x-2">
-                  {item.icon && <Icon name={item.icon} class="size-4" />}
-                  {item.label}
+                  {item.icon && (
+                    <Icon name={item.icon} class="size-4 shrink-0" />
+                  )}
+                  <span>{item.label}</span>
                 </span>
               </BreadcrumbPage>
             ) : (
               <BreadcrumbLink href={item.href}>
                 <span class="flex items-center gap-x-2">
-                  {item.icon && <Icon name={item.icon} class="size-4" />}
-                  {item.label}
+                  {item.icon && (
+                    <Icon name={item.icon} class="size-4 shrink-0" />
+                  )}
+                  <span>{item.label}</span>
                 </span>
               </BreadcrumbLink>
             )}

src/components/Head.astro

@@ -18,6 +18,7 @@ const { title, description } = Astro.props;
 
 <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
 <meta name="generator" content={Astro.generator} />
+
 <meta name="HandheldFriendly" content="True" />
 <meta name="mobile-web-app-capable" content="yes" />
 <meta name="apple-mobile-web-app-capable" content="yes" />

src/components/ThemeToggle.astro

@@ -3,7 +3,13 @@ import { Button } from "@/components/ui/button";
 import { Icon } from "astro-icon/components";
 ---
 
-<Button id="theme-toggle" variant="ghost" size="icon" title="Toggle theme" className="-me-2 size-8">
+<Button
+  id="theme-toggle"
+  variant="ghost"
+  size="icon"
+  title="Toggle theme"
+  className="-me-2 size-8"
+>
   <Icon
     name="lucide:sun"
     class="size-4 scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90"
@@ -27,30 +33,31 @@ import { Icon } from "astro-icon/components";
     return 'light'
   })()
 
-  if (theme === 'light') {
-    document.documentElement.classList.remove('dark')
-  } else {
-    document.documentElement.classList.add('dark')
-  }
-
+  document.documentElement.setAttribute('data-theme', theme)
+  document.documentElement.classList.add(
+    theme === 'dark' ? 'scheme-dark' : 'scheme-light',
+  )
   window.localStorage.setItem('theme', theme)
 </script>
 
 <script>
   function handleToggleClick() {
     const element = document.documentElement
+    const currentTheme = element.getAttribute('data-theme')
+    const newTheme = currentTheme === 'dark' ? 'light' : 'dark'
 
-    element.classList.add('disable-transitions')
-    element.classList.toggle('dark')
+    element.classList.add('[&_*]:transition-none')
+    element.setAttribute('data-theme', newTheme)
+    element.classList.remove('scheme-dark', 'scheme-light')
+    element.classList.add(newTheme === 'dark' ? 'scheme-dark' : 'scheme-light')
 
     window.getComputedStyle(element).getPropertyValue('opacity')
 
     requestAnimationFrame(() => {
-      element.classList.remove('disable-transitions')
+      element.classList.remove('[&_*]:transition-none')
     })
 
-    const isDark = element.classList.contains('dark')
-    localStorage.setItem('theme', isDark ? 'dark' : 'light')
+    localStorage.setItem('theme', newTheme)
   }
 
   function initThemeToggle() {
@@ -63,21 +70,21 @@ import { Icon } from "astro-icon/components";
   initThemeToggle()
 
   document.addEventListener('astro:after-swap', () => {
-    const storedTheme = localStorage.getItem('theme')
+    const storedTheme = localStorage.getItem('theme') || 'light'
     const element = document.documentElement
 
-    element.classList.add('disable-transitions')
+    element.classList.add('[&_*]:transition-none')
 
     window.getComputedStyle(element).getPropertyValue('opacity')
 
-    if (storedTheme === 'dark') {
-      element.classList.add('dark')
-    } else {
-      element.classList.remove('dark')
-    }
+    element.setAttribute('data-theme', storedTheme)
+    element.classList.remove('scheme-dark', 'scheme-light')
+    element.classList.add(
+      storedTheme === 'dark' ? 'scheme-dark' : 'scheme-light',
+    )
 
     requestAnimationFrame(() => {
-      element.classList.remove('disable-transitions')
+      element.classList.remove('[&_*]:transition-none')
     })
 
     initThemeToggle()

src/layouts/Layout.astro

@@ -19,7 +19,7 @@ const { title, description } = Astro.props;
 ---
 
 <!doctype html>
-<html lang="en">
+<html lang="en" class="bg-background text-foreground">
   <head>
     <Head title={`${title} | ${SITE.title}`} description={description} />
   </head>

src/pages/blog/[...id].astro

@@ -55,8 +55,8 @@ const { Content, headings } = await render(post);
   >
     <Breadcrumbs
       items={[
-        { href: '/blog', label: 'Blog', icon: 'lucide:archive' },
-        { label: post.data.title, icon: 'lucide:file-text' },
+        { href: '/blog', label: 'Blog', icon: 'lucide:library-big' },
+        { label: post.data.title, icon: 'lucide:book-open-text' },
       ]}
       class="col-start-2"
     />

src/pages/blog/[...page].astro

@@ -40,8 +40,8 @@ const years = Object.keys(postsByYear).sort(
   <Container class="flex grow flex-col gap-y-6">
     <Breadcrumbs
       items={[
-        { label: 'Blog', href: '/blog', icon: 'lucide:archive' },
-        { label: `Page ${page.currentPage}`, icon: 'lucide:folder-open' },
+        { label: 'Blog', href: '/blog', icon: 'lucide:library-big' },
+        { label: `Page ${page.currentPage}`, icon: 'lucide:book-copy' },
       ]}
     />
 

src/styles/global.css

@@ -1,6 +1,6 @@
 @import "tailwindcss";
 
-@custom-variant dark (&:is(.dark *));
+@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));
 
 @theme inline {
 	--font-sans: "Geist Variable", ui-sans-serif, system-ui, sans-serif,
@@ -49,7 +49,7 @@
 	--ring: oklch(0.708 0 0);
 }
 
-.dark {
+[data-theme="dark"] {
 	--background: oklch(0.145 0 0);
 	--foreground: oklch(0.985 0 0);
 	--primary: oklch(0.922 0 0);
@@ -73,20 +73,4 @@
 	::file-selector-button {
 		@apply border-border outline-ring/50 tracking-tight;
 	}
-
-	html {
-		@apply bg-background text-foreground scheme-light;
-
-		&.dark {
-			@apply scheme-dark;
-		}
-
-		::-webkit-scrollbar-corner {
-			@apply bg-transparent;
-		}
-	}
-
-	.disable-transitions * {
-		@apply transition-none!;
-	}
 }