diff --git a/webapp/index.html b/webapp/index.html
index 66f0c34..106d9e1 100644
--- a/webapp/index.html
+++ b/webapp/index.html
@@ -9,7 +9,6 @@
     <link rel="icon" href="/favicon.svg" sizes="any" type="image/svg+xml" />
     <link rel="apple-touch-icon" href="/apple-touch-icon-180x180.png" sizes="180x180" />
     <link rel="mask-icon" href="/maskable-icon-512x512.png" color="#ffffff" />
-    <meta name="theme-color" content="#afbabc" />
 
     <meta name="author" content="daylily" />
     <meta
diff --git a/webapp/src/App.svelte b/webapp/src/App.svelte
index b5e1466..3430e88 100644
--- a/webapp/src/App.svelte
+++ b/webapp/src/App.svelte
@@ -5,6 +5,10 @@ import { ModeWatcher, mode } from 'mode-watcher'
 import { Toaster } from 'svelte-sonner'
 </script>
 
+<svelte:head>
+  <meta name="theme-color" content={mode.current === 'dark' ? '#141211' : '#ffffff'} />
+</svelte:head>
+
 <ModeWatcher />
 <Toaster position="bottom-center" duration={2000} theme={mode.current} invert />