From 9eacedc4845666791478e1c3a5a700b4c04f215b Mon Sep 17 00:00:00 2001
From: Darius Cepulis <dcepulis@mux.com>
Date: Mon, 27 Oct 2025 14:45:21 -0500
Subject: [PATCH] feat(website): update favicon and theme color based on dark
 mode

---
 website/public/favicon-dark.ico        | Bin 0 -> 4286 bytes
 website/public/favicon-dark.svg        |   7 +++++++
 website/src/components/ThemeInit.astro |  15 +++++++++++++++
 website/src/components/ThemeToggle.tsx |  15 ++++++++++++---
 website/src/layouts/Base.astro         |   1 +
 5 files changed, 35 insertions(+), 3 deletions(-)
 create mode 100644 website/public/favicon-dark.ico
 create mode 100644 website/public/favicon-dark.svg

diff --git a/website/public/favicon-dark.ico b/website/public/favicon-dark.ico
new file mode 100644
index 0000000000000000000000000000000000000000..342b70ce47e403f329313161567f54ef1a5f4d85
GIT binary patch
literal 4286
zcmZQzU<5)11qKkwutI==L5zWcK?8_^LJST-3=#(epqwx_1VaQE7z(Xd{2#@mVKABo
zaHoNM>!tr4^+Wz=S<V@dyaKXcLsRR&u9ngNP?HL(y20Gy)qleHDcF9H8$eh`H|D>o
z*##o>5o0znYEbQmxWnMTf#D>e8=lj_9oX!LgoU<_|9=zHBQ$mcZu=o&q4Qtgp!vU<
z`6C*+gOL4@u+Y+W`EP8pg9dIO&VE?>)YC5khQ%E!x`Q<PLGIAhvi@&myb9=smsD^E
z>Gs3ILRT*Zm{+gjbc0gTr~d?T!dsO54>Ow>TFol$zjDkS!gk<u2O0LO>skL-@m~+L
z_akL?gWN@;{c84Q|CQpNP;M_QOo+5!-O%;FO7LFl*-NbbS~~w#o!fxn^osg+69|8G
zlYsxq;iqY1FFyZk8~j)GnEGES@jY$r#^Qf9i@5*FQP-$quh_;v{|Vx?-@y4_-N^jE
uZ0+j*VjF%F)<cZB#Hs<>uM}4BUt-A%`r1pZ`$pA`#>)^*1F&&`fuaGs!&7$v

literal 0
HcmV?d00001

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" />