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 1/2] 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';
+}

From 9ec2fa54af5857dfcb3f30d677f0f06eb00aa6a9 Mon Sep 17 00:00:00 2001
From: Ryan Alexander <38785445+ryanalexander@users.noreply.github.com>
Date: Mon, 16 Aug 2021 04:14:39 +1000
Subject: [PATCH 2/2] Removed css changes to appearance tab text

---
 src/pages/settings/panes/Panes.module.scss | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/pages/settings/panes/Panes.module.scss b/src/pages/settings/panes/Panes.module.scss
index 9036e9fb..3dc66c45 100644
--- a/src/pages/settings/panes/Panes.module.scss
+++ b/src/pages/settings/panes/Panes.module.scss
@@ -296,11 +296,9 @@
                 margin-bottom: 8px;
                 text-transform: capitalize;
 
-                color: transparent;
                 background: inherit;
                 background-clip: text;
                 -webkit-background-clip: text;
-                filter: sepia(1) invert(1) contrast(9) grayscale(1);
             }
 
             .override {