diff options
| author | Eiichi Yoshikawa <edo@bari-ikutsu.com> | 2024-02-19 11:06:00 +0900 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2024-02-18 18:06:00 -0800 |
| commit | 7390863a1005eeadbb6dbdcbc47f9cc13298e101 (patch) | |
| tree | 63ec2acb54e2ad273fca6e54b7be1af750f85804 | |
| parent | a40b43dfc922ced379b73ec3967d8fb297cea925 (diff) | |
| download | voidsky-7390863a1005eeadbb6dbdcbc47f9cc13298e101.tar.zst | |
Add theme-color meta tag and apply selection of theme (#2918)
* Add theme-color meta tag and apply selection of theme * update logic for retrieving current theme color * add ts-ignore * fix ts error --------- Co-authored-by: Hailey <me@haileyok.com>
| -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. |