diff --git a/frontend/src/exporter/Exporter.tsx b/frontend/src/exporter/Exporter.tsx
index 3f9c0babbe134..339f0a4ee6a2d 100644
--- a/frontend/src/exporter/Exporter.tsx
+++ b/frontend/src/exporter/Exporter.tsx
@@ -4,7 +4,7 @@ import './Exporter.scss'
 import clsx from 'clsx'
 import { useValues } from 'kea'
 import { useResizeObserver } from 'lib/hooks/useResizeObserver'
-import { useThemedBody } from 'lib/hooks/useThemedBody'
+import { useThemedHtml } from 'lib/hooks/useThemedHtml'
 import { Link } from 'lib/lemon-ui/Link'
 import { useEffect } from 'react'
 import { Dashboard } from 'scenes/dashboard/Dashboard'
@@ -34,7 +34,7 @@ export function Exporter(props: ExportedData): JSX.Element {
         window.parent?.postMessage({ event: 'posthog:dimensions', name: window.name, height, width }, '*')
     }, [height, width])
 
-    useThemedBody()
+    useThemedHtml()
 
     return (
         <div
diff --git a/frontend/src/lib/hooks/useThemedBody.ts b/frontend/src/lib/hooks/useThemedBody.ts
deleted file mode 100644
index 862f20e28773b..0000000000000
--- a/frontend/src/lib/hooks/useThemedBody.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { useValues } from 'kea'
-import { useEffect } from 'react'
-
-import { themeLogic } from '~/layout/navigation-3000/themeLogic'
-
-export function useThemedBody(): void {
-    const { isDarkModeOn } = useValues(themeLogic)
-
-    useEffect(() => {
-        document.body.setAttribute('theme', isDarkModeOn ? 'dark' : 'light')
-        // overflow-hidden since each area handles scrolling individually (e.g. navbar, scene, side panel)
-        document.body.classList.add('overflow-hidden')
-    }, [isDarkModeOn])
-}
diff --git a/frontend/src/lib/hooks/useThemedHtml.ts b/frontend/src/lib/hooks/useThemedHtml.ts
new file mode 100644
index 0000000000000..18498a25d5ca5
--- /dev/null
+++ b/frontend/src/lib/hooks/useThemedHtml.ts
@@ -0,0 +1,34 @@
+import { captureException } from '@sentry/react'
+import { useValues } from 'kea'
+import { useEffect } from 'react'
+import { sceneLogic } from 'scenes/sceneLogic'
+
+import { themeLogic } from '~/layout/navigation-3000/themeLogic'
+
+export function useThemedHtml(): void {
+    const { isDarkModeOn } = useValues(themeLogic)
+    const { sceneConfig } = useValues(sceneLogic)
+
+    useEffect(() => {
+        document.body.setAttribute('theme', isDarkModeOn ? 'dark' : 'light')
+        // overflow-hidden since each area handles scrolling individually (e.g. navbar, scene, side panel)
+        document.body.classList.add('overflow-hidden')
+    }, [isDarkModeOn])
+
+    useEffect(() => {
+        // Add a theme-color meta tag to the head to change the address bar color on browsers that support it
+        try {
+            const root = document.documentElement
+            const style = getComputedStyle(root)
+            const backgroundColor = sceneConfig?.projectBased
+                ? style.getPropertyValue(isDarkModeOn ? '--accent-3000-dark' : '--accent-3000-light')
+                : style.getPropertyValue('--bg-bridge')
+
+            document.head.querySelector('meta[name="theme-color"]')?.remove()
+            document.head.insertAdjacentHTML('beforeend', `<meta name="theme-color" content="${backgroundColor}">`)
+        } catch (e) {
+            console.warn('Failed to set theme-color meta tag. This could indicate the variables no longer exist', e)
+            captureException(new Error('Failed to set theme-color meta tag'), { extra: { error: e } })
+        }
+    }, [isDarkModeOn, sceneConfig?.projectBased])
+}
diff --git a/frontend/src/scenes/App.tsx b/frontend/src/scenes/App.tsx
index 220bbfdb80197..cf8686380b2ef 100644
--- a/frontend/src/scenes/App.tsx
+++ b/frontend/src/scenes/App.tsx
@@ -1,6 +1,6 @@
 import { actions, BindLogic, connect, events, kea, path, reducers, selectors, useMountedLogic, useValues } from 'kea'
 import { MOCK_NODE_PROCESS } from 'lib/constants'
-import { useThemedBody } from 'lib/hooks/useThemedBody'
+import { useThemedHtml } from 'lib/hooks/useThemedHtml'
 import { ToastCloseButton } from 'lib/lemon-ui/LemonToast/LemonToast'
 import { SpinnerOverlay } from 'lib/lemon-ui/Spinner/Spinner'
 import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
@@ -71,7 +71,7 @@ export const appLogic = kea<appLogicType>([
 export function App(): JSX.Element | null {
     const { showApp, showingDelayedSpinner } = useValues(appLogic)
     useMountedLogic(sceneLogic({ scenes: appScenes }))
-    useThemedBody()
+    useThemedHtml()
 
     if (showApp) {
         return (