diff --git a/packages/mobile/html/Web.bundle/src/index.html b/packages/mobile/html/Web.bundle/src/index.html
index 68d687198..2405f0d7b 100644
--- a/packages/mobile/html/Web.bundle/src/index.html
+++ b/packages/mobile/html/Web.bundle/src/index.html
@@ -5,6 +5,7 @@
     <meta charset="utf-8" />
     <meta content="IE=edge" http-equiv="X-UA-Compatible" />
     <meta content="viewport-fit=cover, width=device-width, initial-scale=1" name="viewport" />
+    <meta content="#ffffff" name="theme-color" />
     <link rel="stylesheet" href="web-src/app.css" />
     <script>
         window.defaultSyncServer = "https://api.standardnotes.com";
@@ -22,4 +23,4 @@
 <body>
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/packages/ui-services/src/Theme/ThemeManager.ts b/packages/ui-services/src/Theme/ThemeManager.ts
index 8f623b0cb..d0a67a55f 100644
--- a/packages/ui-services/src/Theme/ThemeManager.ts
+++ b/packages/ui-services/src/Theme/ThemeManager.ts
@@ -287,9 +287,24 @@ export class ThemeManager extends AbstractService {
     link.rel = 'stylesheet'
     link.media = 'screen,print'
     link.id = theme.uuid
+    link.onload = this.syncThemeColorMetadata
     document.getElementsByTagName('head')[0].appendChild(link)
   }
 
+  /**
+   * Syncs the active theme's background color to the 'theme-color' meta tag
+   * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name/theme-color
+   */
+  private syncThemeColorMetadata() {
+    const themeColorMetaElement = document.querySelector('meta[name="theme-color"]')
+    if (!themeColorMetaElement) {
+      return
+    }
+
+    const bgColor = getComputedStyle(document.documentElement).getPropertyValue('--sn-stylekit-background-color')
+    themeColorMetaElement.setAttribute('content', bgColor ? bgColor.trim() : '#ffffff')
+  }
+
   private deactivateTheme(uuid: string) {
     const element = document.getElementById(uuid) as HTMLLinkElement
     if (element) {
