Transparent will now fallback to the contrasting colour of background

https://github.com/revoltchat/revite/issues/88
This commit is contained in:
Ryan Alexander 2021-08-17 19:30:41 +10:00 committed by GitHub
parent 745b03452b
commit 5ad4485c64
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -372,7 +372,16 @@ export function Component(props: Props) {
}
/>
</div>
<span style={`color: ${getContrastingColour(theme[x])}`}>{x}</span>
<span
style={`color: ${
theme[x].toUpperCase() === "TRANSPARENT"
? getContrastingColour(
theme["primary-background"],
)
: getContrastingColour(theme[x])
}`}>
{x}
</span>
<div className={styles.override}>
<div
className={styles.picker}
@ -446,11 +455,11 @@ export const Appearance = connectState(Component, (state) => {
};
});
function getContrastingColour(hex: string){
function getContrastingColour(hex: string) {
hex = hex.replace("#", "");
const r = parseInt(hex.substr(0,2),16);
const g = parseInt(hex.substr(2,2),16);
const b = parseInt(hex.substr(4,2),16);
const cc = ((r*299)+(g*587)+(b*114))/1000;
return (cc >= 128) ? 'black' : 'white';
const r = parseInt(hex.substr(0, 2), 16);
const g = parseInt(hex.substr(2, 2), 16);
const b = parseInt(hex.substr(4, 2), 16);
const cc = (r * 299 + g * 587 + b * 114) / 1000;
return cc >= 128 ? "black" : "white";
}