feat: Browser themes (#20542)

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

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])
+}

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 (