From 98d1f06ce6d9e8ec3b6b9435f162cc3d97845b20 Mon Sep 17 00:00:00 2001 From: Ryan Alexander <38785445+ryanalexander@users.noreply.github.com> Date: Wed, 18 Aug 2021 10:11:17 +1000 Subject: [PATCH] Update Appearance.tsx --- src/pages/settings/panes/Appearance.tsx | 29 +++++++++++++------------ 1 file changed, 15 insertions(+), 14 deletions(-) diff --git a/src/pages/settings/panes/Appearance.tsx b/src/pages/settings/panes/Appearance.tsx index 1c237da8..1e4ca2ac 100644 --- a/src/pages/settings/panes/Appearance.tsx +++ b/src/pages/settings/panes/Appearance.tsx @@ -373,13 +373,10 @@ export function Component(props: Props) { /> + style={`color: ${getContrastingColour( + theme[x], + theme["primary-background"], + )}`}> {x}
@@ -455,11 +452,15 @@ export const Appearance = connectState(Component, (state) => { }; }); -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 >= 75 ? "black" : "white"; +function getContrastingColour(hex: string, fallback: string): string { + try { + 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 >= 175 ? "black" : "white"; + } catch (e) { + return getContrastingColour(fallback, "#fffff"); + } }