feat: update theme handling and improve icons

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()