From 7390863a1005eeadbb6dbdcbc47f9cc13298e101 Mon Sep 17 00:00:00 2001 From: Eiichi Yoshikawa Date: Mon, 19 Feb 2024 11:06:00 +0900 Subject: 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 --- src/alf/util/useColorModeTheme.ts | 19 ++++++++++--------- 1 file changed, 10 insertions(+), 9 deletions(-) (limited to 'src/alf/util/useColorModeTheme.ts') diff --git a/src/alf/util/useColorModeTheme.ts b/src/alf/util/useColorModeTheme.ts index 48cf904fe..4f8921bf9 100644 --- a/src/alf/util/useColorModeTheme.ts +++ b/src/alf/util/useColorModeTheme.ts @@ -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 } } -- cgit 1.4.1