mirror of
https://github.com/revoltchat/revite.git
synced 2024-12-26 23:42:11 -05:00
Transparent will now fallback to the contrasting colour of background
https://github.com/revoltchat/revite/issues/88
This commit is contained in:
parent
745b03452b
commit
5ad4485c64
1 changed files with 16 additions and 7 deletions
|
@ -372,7 +372,16 @@ export function Component(props: Props) {
|
||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
</div>
|
</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.override}>
|
||||||
<div
|
<div
|
||||||
className={styles.picker}
|
className={styles.picker}
|
||||||
|
@ -446,11 +455,11 @@ export const Appearance = connectState(Component, (state) => {
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
|
|
||||||
function getContrastingColour(hex: string){
|
function getContrastingColour(hex: string) {
|
||||||
hex = hex.replace("#", "");
|
hex = hex.replace("#", "");
|
||||||
const r = parseInt(hex.substr(0,2),16);
|
const r = parseInt(hex.substr(0, 2), 16);
|
||||||
const g = parseInt(hex.substr(2,2),16);
|
const g = parseInt(hex.substr(2, 2), 16);
|
||||||
const b = parseInt(hex.substr(4,2),16);
|
const b = parseInt(hex.substr(4, 2), 16);
|
||||||
const cc = ((r*299)+(g*587)+(b*114))/1000;
|
const cc = (r * 299 + g * 587 + b * 114) / 1000;
|
||||||
return (cc >= 128) ? 'black' : 'white';
|
return cc >= 128 ? "black" : "white";
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue