Matrix/element-web-Github
1
0
Fork 0
mirror of https://github.com/vector-im/element-web.git synced 2024-11-17 14:05:04 +08:00
Code Issues Packages Projects Releases Wiki Activity

automatically and correctly retint when changing theme

Browse Source
This commit is contained in:
Matthew Hodgson 2017-11-15 01:45:51 +00:00
parent d6fc4ebe3c
commit 546b062d82
2 changed files with 26 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
src/Tinter.js
View File

@ -74,7 +74,7 @@ class Tinter {
"#FFFFFF", // white highlights of the SVGs (for switching to dark theme)
];
// cache of our replacement colours
// track the replacement colours actually being used
// defaults to our keys.
this.colors = [
this.keyHex[0],
@ -83,6 +83,15 @@ class Tinter {
this.keyHex[3],
];
// track the most current tint request inputs (which may differ from the
// end result stored in this.colors
this.currentTint = [
undefined,
undefined,
undefined,
undefined,
];
this.cssFixups = [
// { theme: {
// style: a style object that should be fixed up taken from a stylesheet
@ -136,11 +145,11 @@ class Tinter {
return this.keyRgb;
}
getCurrentColors() {
return this.colors;
}
tint(primaryColor, secondaryColor, tertiaryColor) {
this.currentTint[0] = primaryColor;
this.currentTint[1] = secondaryColor;
this.currentTint[2] = tertiaryColor;
this.calcCssFixups();
if (DEBUG) console.log("Tinter.tint(" + primaryColor + ", " +
@ -200,6 +209,8 @@ class Tinter {
}
tintSvgWhite(whiteColor) {
this.currentTint[3] = whiteColor;
if (!whiteColor) {
whiteColor = this.colors[3];
}
@ -234,6 +245,16 @@ class Tinter {
this.calcCssFixups();
this.forceTint = true;
this.tint(this.currentTint[0], this.currentTint[1], this.currentTint[2]);
if (theme === 'dark') {
// abuse the tinter to change all the SVG's #fff to #2d2d2d
// XXX: obviously this shouldn't be hardcoded here.
this.tintSvgWhite('#2d2d2d');
} else {
this.tintSvgWhite('#ffffff');
}
}
calcCssFixups() {

10
src/components/structures/MatrixChat.js
View File

@ -922,13 +922,11 @@ module.exports = React.createClass({
styleElements[theme].disabled = false;
const switchTheme = function() {
const colors = Tinter.getCurrentColors();
Object.values(styleElements).forEach((a) => {
if (a == styleElements[theme]) return;
a.disabled = true;
});
Tinter.setTheme(theme);
Tinter.tint(colors[0], colors[1]);
};
// turns out that Firefox preloads the CSS for link elements with
@ -952,14 +950,6 @@ module.exports = React.createClass({
styleElements[theme].onload = undefined;
switchTheme();
}
if (theme === 'dark') {
// abuse the tinter to change all the SVG's #fff to #2d2d2d
// XXX: obviously this shouldn't be hardcoded here.
Tinter.tintSvgWhite('#2d2d2d');
} else {
Tinter.tintSvgWhite('#ffffff');
}
},
/**