zio/bsky-app
2
0
Fork 0
Code Pull requests Releases Packages Activity

Add theme-color meta tag and apply selection of theme (#2918)

Browse source 
* 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>
This commit is contained in:
Eiichi Yoshikawa 2024-02-19 11:06:00 +09:00 • committed by GitHub
parent a40b43dfc9
commit 7390863a10
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 12 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

19
src/alf/util/useColorModeTheme.ts
View file

@ -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
}
}