diff --git a/src/web/components/theme-toggle.astro b/src/web/components/theme-toggle.astro
index be9fb13..16d0c71 100644
--- a/src/web/components/theme-toggle.astro
+++ b/src/web/components/theme-toggle.astro
@@ -17,6 +17,11 @@ import Icon from './icon.astro';
   const toggleTheme = () => {
     const theme = localStorage.getItem('theme') ?? 'light';
     const newTheme = theme === 'light' ? 'dark' : 'light';
+    const themeMeta = document.getElementsByName('theme-color') as NodeListOf<HTMLMetaElement>;
+
+    if (themeMeta[0]) {
+      themeMeta[0].content = newTheme === 'dark' ? '#1a202c' : '#ffffff';
+    }
 
     document.documentElement.classList[newTheme === 'dark' ? 'add' : 'remove']('dark');
     localStorage.setItem('theme', newTheme);
diff --git a/src/web/head/initial-theme.astro b/src/web/head/initial-theme.astro
index 1cf2700..6612f84 100644
--- a/src/web/head/initial-theme.astro
+++ b/src/web/head/initial-theme.astro
@@ -6,6 +6,12 @@
     return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
   })();
 
+  const themeMeta = document.getElementsByName('theme-color');
+
+  if (themeMeta[0]) {
+    themeMeta[0].content = theme === 'dark' ? '#1a202c' : '#ffffff';
+  }
+
   if (theme === 'light') {
     document.documentElement.classList.remove('dark');
   } else {