forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
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>
authored by
Eiichi Yoshikawa
Hailey
and committed by
GitHub
7390863a
a40b43df
+12
-9
+1
bskyweb/templates/base.html
+1
bskyweb/templates/base.html
+10
-9
src/alf/util/useColorModeTheme.ts
+10
-9
src/alf/util/useColorModeTheme.ts
···
13
13
React.useLayoutEffect(() => {
14
14
const theme = getThemeName(colorScheme, colorMode, darkTheme)
15
15
updateDocument(theme)
16
-
updateSystemBackground(theme)
16
+
SystemUI.setBackgroundColorAsync(getBackgroundColor(theme))
17
17
}, [colorMode, colorScheme, darkTheme])
18
18
19
19
return React.useMemo(
···
42
42
if (isWeb && typeof window !== 'undefined') {
43
43
// @ts-ignore web only
44
44
const html = window.document.documentElement
45
+
// @ts-ignore web only
46
+
const meta = window.document.querySelector('meta[name="theme-color"]')
47
+
45
48
// remove any other color mode classes
46
49
html.className = html.className.replace(/(theme)--\w+/g, '')
47
-
48
50
html.classList.add(`theme--${theme}`)
51
+
// set color to 'theme-color' meta tag
52
+
meta?.setAttribute('content', getBackgroundColor(theme))
49
53
}
50
54
}
51
55
52
-
function updateSystemBackground(theme: ThemeName) {
56
+
function getBackgroundColor(theme: ThemeName): string {
53
57
switch (theme) {
54
58
case 'light':
55
-
SystemUI.setBackgroundColorAsync(light.atoms.bg.backgroundColor)
56
-
break
59
+
return light.atoms.bg.backgroundColor
57
60
case 'dark':
58
-
SystemUI.setBackgroundColorAsync(dark.atoms.bg.backgroundColor)
59
-
break
61
+
return dark.atoms.bg.backgroundColor
60
62
case 'dim':
61
-
SystemUI.setBackgroundColorAsync(dim.atoms.bg.backgroundColor)
62
-
break
63
+
return dim.atoms.bg.backgroundColor
63
64
}
64
65
}