diff --git a/index.html b/index.html
index 9e6ff884..abc042ea 100644
--- a/index.html
+++ b/index.html
@@ -7,6 +7,7 @@
         <link rel="icon" href="/favicon.ico" />
         <link title="Piped" type="application/opensearchdescription+xml" rel="search" href="/opensearch.xml" />
         <title>Piped</title>
+        <meta name="theme-color" content="#0f0f0f">
         <meta property="og:title" content="Piped" />
         <meta property="og:type" content="website" />
         <meta property="og:image" content="/img/icons/favicon-32x32.png" />
diff --git a/src/App.vue b/src/App.vue
index b59c4442..5f1282f5 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -34,6 +34,14 @@ export default {
             if (themePref == "auto") this.theme = darkModePreference.matches ? "dark" : "light";
             else this.theme = themePref;
 
+            // Change title bar color based on user's theme
+            const themeColor = document.querySelector("meta[name='theme-color']");
+            if (this.theme === "light") {
+                themeColor.setAttribute("content", "#FFF");
+            } else {
+                themeColor.setAttribute("content", "#0F0F0F");
+            }
+
             // Used for the scrollbar
             const root = document.querySelector(":root");
             this.theme == "dark" ? root.classList.add("dark") : root.classList.remove("dark");