feat(web): set Safari window colors (#1543)

* feat(web): update meta-theme color

- used by Safari for its colored compact tab bar

* fix: hardcode the colors
This commit is contained in:
soup 2024-05-08 14:10:26 +02:00 committed by GitHub
parent 8120c33f6b
commit 190994c70b
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 18 additions and 1 deletions

View file

@ -115,10 +115,27 @@ export const SettingsContext = newRidgeState<SettingsType>(
onSet: (newState, prevState) => {
document.documentElement.classList.toggle("dark", newState.darkTheme);
DefaultSetter(SettingsKey, newState, prevState);
updateMetaThemeColor(newState.darkTheme);
}
}
);
/**
* Updates the meta theme color based on the current theme state.
* Used by Safari to color the compact tab bar on both iOS and MacOS.
*/
const updateMetaThemeColor = (darkTheme: boolean) => {
const color = darkTheme ? '#121315' : '#f4f4f5';
let metaThemeColor: HTMLMetaElement | null = document.querySelector('meta[name="theme-color"]');
if (!metaThemeColor) {
metaThemeColor = document.createElement('meta') as HTMLMetaElement;
metaThemeColor.name = "theme-color";
document.head.appendChild(metaThemeColor);
}
metaThemeColor.content = color;
};
export const FilterListContext = newRidgeState<FilterListState>(
FilterListContextDefaults,
{