diff --git a/website/public/favicon-dark.ico b/website/public/favicon-dark.ico
new file mode 100644
index 00000000..342b70ce
Binary files /dev/null and b/website/public/favicon-dark.ico differ
diff --git a/website/public/favicon-dark.svg b/website/public/favicon-dark.svg
new file mode 100644
index 00000000..b6764fc3
--- /dev/null
+++ b/website/public/favicon-dark.svg
@@ -0,0 +1,7 @@
+<svg viewBox="0 0 90 90" xmlns="http://www.w3.org/2000/svg">
+  <path fill="#fcb116" d="M0 0h90v90H0z" />
+  <path fill="#f26222" d="M0 22.5h90V90H0z" />
+  <path fill="#ea3837" d="M0 45h90v45H0z" />
+  <path fill="#a83b71" d="M0 67.5h90V90H0z" />
+  <path d="M71.954 45L28.046 73.125v-56.25L71.954 45z" fill="#2a2928" />
+</svg>
diff --git a/website/src/components/ThemeInit.astro b/website/src/components/ThemeInit.astro
index f08bf91f..61a6571c 100644
--- a/website/src/components/ThemeInit.astro
+++ b/website/src/components/ThemeInit.astro
@@ -15,12 +15,27 @@ import { THEME_KEY } from '@/consts';
       localStorage[localStorageKey] = 'system';
       localStorageValue = 'system';
     }
+    let isDark = false;
     if (localStorageValue === 'dark') {
       document.documentElement.classList.add('dark');
+      isDark = true;
     } else if (localStorageValue === 'system') {
       if (typeof window.matchMedia !== 'undefined' && window.matchMedia('(prefers-color-scheme: dark)').matches) {
         document.documentElement.classList.add('dark');
+        isDark = true;
       }
     }
+    const themeColorMeta = document.querySelector('meta[name="theme-color"]');
+    if (themeColorMeta) {
+      themeColorMeta.setAttribute('content', isDark ? '#393836' : '#ebe4c1');
+    }
+    const svgFavicon = document.querySelector('link[rel="icon"][type="image/svg+xml"]');
+    const icoFavicon = document.querySelector('link[rel="icon"][sizes="32x32"]');
+    if (svgFavicon) {
+      svgFavicon.setAttribute('href', isDark ? '/favicon-dark.svg' : '/favicon.svg');
+    }
+    if (icoFavicon) {
+      icoFavicon.setAttribute('href', isDark ? '/favicon-dark.ico' : '/favicon.ico');
+    }
   }
 </script>
diff --git a/website/src/components/ThemeToggle.tsx b/website/src/components/ThemeToggle.tsx
index 0898b651..89aa11a6 100644
--- a/website/src/components/ThemeToggle.tsx
+++ b/website/src/components/ThemeToggle.tsx
@@ -74,11 +74,20 @@ export function ThemeToggle() {
     };
   }, [preference]);
 
-  // Keep document.documentElement in sync with theme
+  // Keep document.documentElement, theme-color, and favicons in sync with theme
   useEffect(() => {
     if (typeof document === 'undefined') return;
-    if (theme === 'light') document.documentElement.classList.remove('dark');
-    else if (theme === 'dark') document.documentElement.classList.add('dark');
+    if (theme === 'light') {
+      document.documentElement.classList.remove('dark');
+      document.querySelector('meta[name="theme-color"]')?.setAttribute('content', '#ebe4c1');
+      document.querySelector('link[rel="icon"][type="image/svg+xml"]')?.setAttribute('href', '/favicon.svg');
+      document.querySelector('link[rel="icon"][sizes="32x32"]')?.setAttribute('href', '/favicon.ico');
+    } else if (theme === 'dark') {
+      document.documentElement.classList.add('dark');
+      document.querySelector('meta[name="theme-color"]')?.setAttribute('content', '#393836');
+      document.querySelector('link[rel="icon"][type="image/svg+xml"]')?.setAttribute('href', '/favicon-dark.svg');
+      document.querySelector('link[rel="icon"][sizes="32x32"]')?.setAttribute('href', '/favicon-dark.ico');
+    }
 
     return () => {
       document.documentElement.classList.remove('dark');
diff --git a/website/src/layouts/Base.astro b/website/src/layouts/Base.astro
index 10828ede..6a9e02b9 100644
--- a/website/src/layouts/Base.astro
+++ b/website/src/layouts/Base.astro
@@ -31,6 +31,7 @@ const fullTitle = Array.isArray(title)
     {/* Global Metadata */}
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
+    <meta name="theme-color" content="#ebe4c1" />
     <link rel="icon" href="/favicon.ico" sizes="32x32" />
     <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
     <link rel="apple-touch-icon" href="/apple-touch-icon.png" />