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> <html>
<head> <head>
<meta charset="UTF-8"> <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="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, viewport-fit=cover">
<meta name="referrer" content="origin-when-cross-origin"> <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(() => { React.useLayoutEffect(() => {
const theme = getThemeName(colorScheme, colorMode, darkTheme) const theme = getThemeName(colorScheme, colorMode, darkTheme)
updateDocument(theme) updateDocument(theme)
updateSystemBackground(theme) SystemUI.setBackgroundColorAsync(getBackgroundColor(theme))
}, [colorMode, colorScheme, darkTheme]) }, [colorMode, colorScheme, darkTheme])
return React.useMemo( return React.useMemo(
@ -42,23 +42,24 @@ function updateDocument(theme: ThemeName) {
if (isWeb && typeof window !== 'undefined') { if (isWeb && typeof window !== 'undefined') {
// @ts-ignore web only // @ts-ignore web only
const html = window.document.documentElement const html = window.document.documentElement
// @ts-ignore web only
const meta = window.document.querySelector('meta[name="theme-color"]')
// remove any other color mode classes // remove any other color mode classes
html.className = html.className.replace(/(theme)--\w+/g, '') html.className = html.className.replace(/(theme)--\w+/g, '')
html.classList.add(`theme--${theme}`) 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) { switch (theme) {
case 'light': case 'light':
SystemUI.setBackgroundColorAsync(light.atoms.bg.backgroundColor) return light.atoms.bg.backgroundColor
break
case 'dark': case 'dark':
SystemUI.setBackgroundColorAsync(dark.atoms.bg.backgroundColor) return dark.atoms.bg.backgroundColor
break
case 'dim': case 'dim':
SystemUI.setBackgroundColorAsync(dim.atoms.bg.backgroundColor) return dim.atoms.bg.backgroundColor
break
} }
} }

1
web/index.html
View File

@ -2,6 +2,7 @@
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="theme-color">
<!-- <!--
This viewport works for phones with notches. This viewport works for phones with notches.
It's optimized for gestures by disabling global zoom. It's optimized for gestures by disabling global zoom.