diff --git a/web/index.html b/web/index.html
index fecf3cb87..66a0f1be1 100644
--- a/web/index.html
+++ b/web/index.html
@@ -5,6 +5,7 @@
     <link rel="alternate icon" type="image/png" href="/favicons/favicon-light-default.png" id="favicon-png" />
     <link rel="icon" type="image/svg+xml" href="/favicons/favicon-light-default.svg" id="favicon-svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="theme-color" content="#65a30d" />
     <title>Woodpecker</title>
     <script type="" src="/web-config.js"></script>
   </head>
diff --git a/web/src/compositions/useDarkMode.ts b/web/src/compositions/useDarkMode.ts
index 7d1c83e97..0188b2df0 100644
--- a/web/src/compositions/useDarkMode.ts
+++ b/web/src/compositions/useDarkMode.ts
@@ -7,9 +7,11 @@ watch(isDarkModeActive, (isActive) => {
   if (isActive) {
     document.documentElement.classList.remove('light');
     document.documentElement.classList.add('dark');
+    document.querySelector('meta[name=theme-color]')?.setAttribute('content', '#2e323e'); // dark-gray-900 (see windi.config.ts)
   } else {
     document.documentElement.classList.remove('dark');
     document.documentElement.classList.add('light');
+    document.querySelector('meta[name=theme-color]')?.setAttribute('content', '#65a30d'); // lime-600
   }
 });