diff --git a/src/pages/settings/panes/Appearance.tsx b/src/pages/settings/panes/Appearance.tsx
index 9cf9ef9c..7ad56cb1 100644
--- a/src/pages/settings/panes/Appearance.tsx
+++ b/src/pages/settings/panes/Appearance.tsx
@@ -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";
 }