diff options
| -rw-r--r-- | bskyweb/templates/base.html | 1 | ||||
| -rw-r--r-- | src/alf/util/useColorModeTheme.ts | 19 | ||||
| -rw-r--r-- | web/index.html | 1 |
3 files changed, 12 insertions, 9 deletions
diff --git a/bskyweb/templates/base.html b/bskyweb/templates/base.html index 198e3baa7..99b6f1dc6 100644 --- a/bskyweb/templates/base.html +++ b/bskyweb/templates/base.html @@ -2,6 +2,7 @@ <html> <head> <meta charset="UTF-8"> + <meta name="theme-color"> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, viewport-fit=cover"> <meta name="referrer" content="origin-when-cross-origin"> <!-- diff --git a/src/alf/util/useColorModeTheme.ts b/src/alf/util/useColorModeTheme.ts index 48cf904fe..4f8921bf9 100644 --- a/src/alf/util/useColorModeTheme.ts +++ b/src/alf/util/useColorModeTheme.ts @@ -13,7 +13,7 @@ export function useColorModeTheme(): ThemeName { React.useLayoutEffect(() => { const theme = getThemeName(colorScheme, colorMode, darkTheme) updateDocument(theme) - updateSystemBackground(theme) + SystemUI.setBackgroundColorAsync(getBackgroundColor(theme)) }, [colorMode, colorScheme, darkTheme]) return React.useMemo( @@ -42,23 +42,24 @@ function updateDocument(theme: ThemeName) { if (isWeb && typeof window !== 'undefined') { // @ts-ignore web only const html = window.document.documentElement + // @ts-ignore web only + const meta = window.document.querySelector('meta[name="theme-color"]') + // remove any other color mode classes html.className = html.className.replace(/(theme)--\w+/g, '') - html.classList.add(`theme--${theme}`) + // set color to 'theme-color' meta tag + meta?.setAttribute('content', getBackgroundColor(theme)) } } -function updateSystemBackground(theme: ThemeName) { +function getBackgroundColor(theme: ThemeName): string { switch (theme) { case 'light': - SystemUI.setBackgroundColorAsync(light.atoms.bg.backgroundColor) - break + return light.atoms.bg.backgroundColor case 'dark': - SystemUI.setBackgroundColorAsync(dark.atoms.bg.backgroundColor) - break + return dark.atoms.bg.backgroundColor case 'dim': - SystemUI.setBackgroundColorAsync(dim.atoms.bg.backgroundColor) - break + return dim.atoms.bg.backgroundColor } } diff --git a/web/index.html b/web/index.html index 42b443bb6..992e69e05 100644 --- a/web/index.html +++ b/web/index.html @@ -2,6 +2,7 @@ <html> <head> <meta charset="utf-8"> + <meta name="theme-color"> <!-- This viewport works for phones with notches. It's optimized for gestures by disabling global zoom. |