Bluesky app fork with some witchin' additions 💫
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

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
··· 2 2 <html> 3 3 <head> 4 4 <meta charset="UTF-8"> 5 + <meta name="theme-color"> 5 6 <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, viewport-fit=cover"> 6 7 <meta name="referrer" content="origin-when-cross-origin"> 7 8 <!--
+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 }
+1
web/index.html
··· 2 2 <html> 3 3 <head> 4 4 <meta charset="utf-8"> 5 + <meta name="theme-color"> 5 6 <!-- 6 7 This viewport works for phones with notches. 7 8 It's optimized for gestures by disabling global zoom.