diff --git a/client/src/ui-context.tsx b/client/src/ui-context.tsx
index 2fb421aa4a79..0234cd3b3249 100644
--- a/client/src/ui-context.tsx
+++ b/client/src/ui-context.tsx
@@ -74,9 +74,6 @@ export function UIProvider(props: any) {
     }
     dark.addEventListener("change", setDark);
     const light = window.matchMedia("(prefers-color-scheme: light)");
-    if (dark.matches) {
-      setColorScheme("dark");
-    }
     light.addEventListener("change", setLight);
     return () => {
       light.removeEventListener("change", setLight);
diff --git a/client/src/ui/molecules/theme-switcher/index.tsx b/client/src/ui/molecules/theme-switcher/index.tsx
index 47c778dd0db8..f542527e3886 100644
--- a/client/src/ui/molecules/theme-switcher/index.tsx
+++ b/client/src/ui/molecules/theme-switcher/index.tsx
@@ -58,10 +58,8 @@ export const ThemeSwitcher = () => {
       console.warn("Unable to read theme from localStorage", e);
     }
 
-    if (theme) {
-      switchTheme(theme, setActiveTheme);
-    }
-  }, [activeTheme]);
+    switchTheme(theme ?? "os-default", setActiveTheme);
+  }, []);
 
   return (
     <DropdownMenuWrapper
diff --git a/client/src/utils.ts b/client/src/utils.ts
index 3d5a89bfb091..1194f70be44c 100644
--- a/client/src/utils.ts
+++ b/client/src/utils.ts
@@ -58,6 +58,17 @@ export function switchTheme(theme: Theme, set: (theme: Theme) => void) {
   if (window && html) {
     html.className = theme;
     html.style.backgroundColor = "";
+
+    setTimeout(() => {
+      const meta = document.querySelector<HTMLMetaElement>(
+        'meta[name="theme-color"]'
+      );
+      const color = getComputedStyle(document.body).backgroundColor;
+      if (meta && color) {
+        meta.content = color;
+      }
+    }, 1);
+
     try {
       window.localStorage.setItem("theme", theme);
     } catch (err) {