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

Remove getBaseTheme

Browse source 
This was only used by vector/index.js, in the code removed by
https://github.com/vector-im/riot-web/pull/11445

React SDK does a very similar thing in setTheme but also gets the
rest of the custom theme name.

Requires https://github.com/vector-im/riot-web/pull/11445
This commit is contained in:
David Baker 2019-11-20 15:45:32 +00:00
parent 518130c912
commit b69cee0c67
1 changed files with 34 additions and 45 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

79
src/theme.js
View file

@ -127,28 +127,14 @@ function getCustomTheme(themeName) {
return customTheme; return customTheme;
} }
/**
* Gets the underlying theme name for the given theme. This is usually the theme or
* CSS resource that the theme relies upon to load.
* @param {string} theme The theme name to get the base of.
* @returns {string} The base theme (typically "light" or "dark").
*/
export function getBaseTheme(theme) {
if (!theme) return "light";
if (theme.startsWith("custom-")) {
const customTheme = getCustomTheme(theme.substr(7));
return customTheme.is_dark ? "dark-custom" : "light-custom";
}
return theme; // it's probably a base theme
}
/** /**
* Called whenever someone changes the theme * Called whenever someone changes the theme
* Async function that returns once the theme has been set
* (ie. the CSS has been loaded)
* *
* @param {string} theme new theme * @param {string} theme new theme
*/ */
export function setTheme(theme) { export async function setTheme(theme) {
if (!theme) { if (!theme) {
const themeWatcher = new ThemeWatcher(); const themeWatcher = new ThemeWatcher();
theme = themeWatcher.getEffectiveTheme(); theme = themeWatcher.getEffectiveTheme();
@ -190,38 +176,41 @@ export function setTheme(theme) {
styleElements[stylesheetName].disabled = false; styleElements[stylesheetName].disabled = false;
const switchTheme = function() { return new Promise((resolve) => {
// we re-enable our theme here just in case we raced with another const switchTheme = function() {
// theme set request as per https://github.com/vector-im/riot-web/issues/5601. // we re-enable our theme here just in case we raced with another
// We could alternatively lock or similar to stop the race, but // theme set request as per https://github.com/vector-im/riot-web/issues/5601.
// this is probably good enough for now. // We could alternatively lock or similar to stop the race, but
styleElements[stylesheetName].disabled = false; // this is probably good enough for now.
Object.values(styleElements).forEach((a) => { styleElements[stylesheetName].disabled = false;
if (a == styleElements[stylesheetName]) return; Object.values(styleElements).forEach((a) => {
a.disabled = true; if (a == styleElements[stylesheetName]) return;
}); a.disabled = true;
Tinter.setTheme(theme); });
}; Tinter.setTheme(theme);
resolve();
};
// turns out that Firefox preloads the CSS for link elements with // turns out that Firefox preloads the CSS for link elements with
// the disabled attribute, but Chrome doesn't. // the disabled attribute, but Chrome doesn't.
let cssLoaded = false; let cssLoaded = false;
styleElements[stylesheetName].onload = () => { styleElements[stylesheetName].onload = () => {
switchTheme(); switchTheme();
}; };
for (let i = 0; i < document.styleSheets.length; i++) { for (let i = 0; i < document.styleSheets.length; i++) {
const ss = document.styleSheets[i]; const ss = document.styleSheets[i];
if (ss && ss.href === styleElements[stylesheetName].href) { if (ss && ss.href === styleElements[stylesheetName].href) {
cssLoaded = true; cssLoaded = true;
break; break;
}
} }
}
if (cssLoaded) { if (cssLoaded) {
styleElements[stylesheetName].onload = undefined; styleElements[stylesheetName].onload = undefined;
switchTheme(); switchTheme();
} }
});
} }