From 07061c4af177ec29a54830c2c89627c7db8c820d Mon Sep 17 00:00:00 2001
From: Ryan Alexander <38785445+ryanalexander@users.noreply.github.com>
Date: Mon, 16 Aug 2021 04:14:10 +1000
Subject: [PATCH] Update Appearance.tsx

---
 src/pages/settings/panes/Appearance.tsx | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/pages/settings/panes/Appearance.tsx b/src/pages/settings/panes/Appearance.tsx
index e293fe8e..9cf9ef9c 100644
--- a/src/pages/settings/panes/Appearance.tsx
+++ b/src/pages/settings/panes/Appearance.tsx
@@ -372,7 +372,7 @@ export function Component(props: Props) {
                                     }
                                 />
                             </div>
-                            <span>{x}</span>
+                            <span style={`color: ${getContrastingColour(theme[x])}`}>{x}</span>
                             <div className={styles.override}>
                                 <div
                                     className={styles.picker}
@@ -445,3 +445,12 @@ export const Appearance = connectState(Component, (state) => {
         settings: state.settings,
     };
 });
+
+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';
+}