PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 4

Fix the white/black theme switch in Chrome

Browse source 
Chrome doesn't fire twice the load event on a stylesheet when the disabled attribute is toggled (enabled => disabled => enabled)
This commit is contained in:
Florian Duros 2022-09-27 11:02:57 +02:00
parent be8e44e17e
commit f574247452
No known key found for this signature in database
GPG key ID: 9700AA5870258A0B
1 changed files with 39 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

44
src/theme.ts
View file

@ -279,26 +279,48 @@ export async function setTheme(theme?: string): Promise<void> {
resolve();
};
const isStyleSheetLoaded = () => Boolean(
[...document.styleSheets]
.find(styleSheet => styleSheet?.href === styleElements[stylesheetName].href),
);
function waitForStyleSheetLoading() {
// turns out that Firefox preloads the CSS for link elements with
// the disabled attribute, but Chrome doesn't.
if (isStyleSheetLoaded()) {
switchTheme();
return;
}
let cssLoaded = false;
let counter = 0;
// In case of theme toggling (white => black => white)
// Chrome doesn't fire the `load` event when the white theme is selected the second times
const intervalId = setInterval(() => {
if (isStyleSheetLoaded()) {
clearInterval(intervalId);
styleElements[stylesheetName].onload = undefined;
styleElements[stylesheetName].onerror = undefined;
switchTheme();
}
// Avoid to be stuck in an endless loop if there is an issue in the stylesheet loading
counter++;
if (counter === 5) {
clearInterval(intervalId);
}
}, 100);
styleElements[stylesheetName].onload = () => {
clearInterval(intervalId);
switchTheme();
};
for (let i = 0; i < document.styleSheets.length; i++) {
const ss = document.styleSheets[i];
if (ss && ss.href === styleElements[stylesheetName].href) {
cssLoaded = true;
break;
}
styleElements[stylesheetName].onerror = () => {
clearInterval(intervalId);
};
}
if (cssLoaded) {
styleElements[stylesheetName].onload = undefined;
switchTheme();
}
waitForStyleSheetLoading();
});
}