fix: mobile browser issues and dark mode flicker

- Fix mobile browser navigation bar color not changing
- Remove scrollbar appearing under 100dvh
- Fix dark mode page transition flicker

src/components/Head.astro

@@ -27,9 +27,9 @@ const { cdn, commentURL = '', imageHostURL = '', customGoogleAnalyticsURL = '',
 <meta name="description" content={postDescription || description} />
 <meta name="author" content={author} />
 <meta name="generator" content={Astro.generator} />
-<meta name="theme-color" content={lightMode} />
+<meta name="theme-color" content=`"${lightMode}"` />
-<meta name="theme-color" media="(prefers-color-scheme: light)" content={lightMode} />
+<meta name="theme-color" media="(prefers-color-scheme: light)" content={`"${lightMode}"`} />
-<meta name="theme-color" media="(prefers-color-scheme: dark)" content={darkMode} />
+<meta name="theme-color" media="(prefers-color-scheme: dark)" content={`"${darkMode}"`} />
 <meta itemprop="name" content={postTitle || title} />
 <meta itemprop="image" content={postImage || siteScreenshot} />
 <meta itemprop="description" content={postDescription || subtitle} />
@@ -92,6 +92,14 @@ const { cdn, commentURL = '', imageHostURL = '', customGoogleAnalyticsURL = '',
 {yandex && <meta name="yandex-verification" content={yandex} />}
 {baidu && <meta name="baidu-site-verification" content={baidu} />}
 
+<!-- Theme Toggle -->
+<script is:inline>
+  const savedTheme = localStorage.getItem('theme')
+  const defaultDark = window.matchMedia('(prefers-color-scheme: dark)').matches
+  const theme = savedTheme || (defaultDark ? 'dark' : 'light')
+  document.documentElement.classList.toggle('dark', theme === 'dark')
+</script>
+
 <!-- Google Analytics -->
 {
   googleAnalyticsID && (

src/components/ThemeToggle.astro

@@ -1,19 +1,3 @@
-<button
-  aria-pressed="false"
-  aria-label="Theme Toggle Button"
-  class="right-10 top-10 z-999 aspect-square w-8 text-secondary"
->
-  <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="moon-icon" fill="currentColor">
-    <g>
-      <path d="m11.64 12.36c-3.6-3.6-4.14-8.89-2.8-10.66-2.39 1.75-1.88 7.86 1.86 11.6s9.86 4.28 11.6 1.86c-1.77 1.34-7.06.8-10.66-2.8" />
-      <path d="m5.22 4.01a10 10 0 0 1 3.54-2.28c-2.02.47-3.24 1.19-4.54 2.49-4.3 4.3-4.3 11.26 0 15.55 4.29 4.29 11.26 4.3 15.55 0 1.3-1.3 2.27-2.68 2.51-4.6a9.8 9.8 0 0 1 -2.3 3.6c-3.96 3.96-10.48 3.86-14.56-.21-4.08-4.08-4.18-10.6-.21-14.56z" />
-    </g>
-  </svg>
-  <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="sun-icon" fill="currentColor">
-    <path d="m4.22 4.22c-4.3 4.3-4.3 11.26 0 15.56s11.26 4.3 15.56 0 4.3-11.26 0-15.56-11.26-4.3-15.56 0m15.17 15.17c-3.63 3.63-9.88 3.26-13.96-.82s-4.45-10.33-.82-13.96 9.88-3.26 13.96.82 4.45 10.33.82 13.96" />
-  </svg>
-</button>
-
 <script>
 declare global {
   interface Document {
@@ -25,12 +9,8 @@ const TOGGLE = document.querySelector('button[aria-pressed]') as HTMLButtonEleme
 if (!TOGGLE)
   throw new Error('Theme toggle button not found')
 
-const defaultDark = window.matchMedia('(prefers-color-scheme: dark)').matches
+const isDark = document.documentElement.classList.contains('dark')
-const savedTheme = localStorage.getItem('theme')
+TOGGLE.setAttribute('aria-pressed', String(isDark))
-const initialTheme = savedTheme || (defaultDark ? 'dark' : 'light')
-
-TOGGLE.setAttribute('aria-pressed', initialTheme === 'dark' ? 'true' : 'false')
-document.documentElement.classList.toggle('dark', initialTheme === 'dark')
 
 function SWITCH() {
   const isDark = !TOGGLE.matches('[aria-pressed=true]')
@@ -51,12 +31,18 @@ function TOGGLE_THEME() {
 TOGGLE.addEventListener('click', TOGGLE_THEME)
 </script>
 
-<style>
+<button
-[aria-pressed='true'] .moon-icon,
+  aria-pressed="false"
-.sun-icon {
+  aria-label="Theme Toggle Button"
-  display: none;
+  class="absolute right-10 top-10 z-999 aspect-square w-8 text-secondary [&[aria-pressed='true']_.sun-icon]:block [&_.sun-icon]:hidden [&[aria-pressed='true']_.moon-icon]:hidden"
-}
+>
-[aria-pressed='true'] .sun-icon {
+  <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="moon-icon" fill="currentColor">
-  display: block;
+    <g>
-}
+      <path d="m11.64 12.36c-3.6-3.6-4.14-8.89-2.8-10.66-2.39 1.75-1.88 7.86 1.86 11.6s9.86 4.28 11.6 1.86c-1.77 1.34-7.06.8-10.66-2.8" />
-</style>
+      <path d="m5.22 4.01a10 10 0 0 1 3.54-2.28c-2.02.47-3.24 1.19-4.54 2.49-4.3 4.3-4.3 11.26 0 15.55 4.29 4.29 11.26 4.3 15.55 0 1.3-1.3 2.27-2.68 2.51-4.6a9.8 9.8 0 0 1 -2.3 3.6c-3.96 3.96-10.48 3.86-14.56-.21-4.08-4.08-4.18-10.6-.21-14.56z" />
+    </g>
+  </svg>
+  <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="sun-icon" fill="currentColor">
+    <path d="m4.22 4.22c-4.3 4.3-4.3 11.26 0 15.56s11.26 4.3 15.56 0 4.3-11.26 0-15.56-11.26-4.3-15.56 0m15.17 15.17c-3.63 3.63-9.88 3.26-13.96-.82s-4.45-10.33-.82-13.96 9.88-3.26 13.96.82 4.45 10.33.82 13.96" />
+  </svg>
+</button>

src/styles/global.css

@@ -4,10 +4,15 @@
     --uno-colors-background: theme('colors.background');
   }
 html {
-  --at-apply: 'antialiased scroll-smooth text-62.5%';
+  --at-apply: 'min-h-screen min-h-dvh scroll-smooth antialiased text-62.5%';
 }
 body {
-  --at-apply: 'bg-background min-h-dvh c-primary text-1.6rem';
+  --at-apply: 'min-h-screen min-h-dvh bg-background text-primary text-1.6rem';
+}
+@supports not (view-transition-name: none) {
+  body {
+    --at-apply: 'transition-all duration-500 ease-in-out';
+  }
 }
 h1, h2, h3 {
     text-rendering: optimizeLegibility;
@@ -43,11 +48,13 @@ html:not(.dark) {
   --from: 100% 0 0 0;
 }
 ::view-transition-new(root) {
+  transition: none;
   animation: reveal 1s cubic-bezier(0.4, 0, 0.2, 1);
   clip-path: inset(0 0 0 0);
   z-index: 2;
 }
 ::view-transition-old(root) {
-  z-index: -1;
+  transition: none;
   animation: none;
+  z-index: -1;
 }