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

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>
zio/stable
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
bskyweb/templates/base.html
View File

@ -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">
<!--

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

1
web/index.html
View File

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