From 5ad4485c6416782efb5a7626e0681563c92a2985 Mon Sep 17 00:00:00 2001
From: Ryan Alexander <38785445+ryanalexander@users.noreply.github.com>
Date: Tue, 17 Aug 2021 19:30:41 +1000
Subject: [PATCH 1/4] Transparent will now fallback to the contrasting colour
 of background

https://github.com/revoltchat/revite/issues/88
---
 src/pages/settings/panes/Appearance.tsx | 23 ++++++++++++++++-------
 1 file changed, 16 insertions(+), 7 deletions(-)

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";
 }

From 457097ade4c8d92fbf5b597e214b43055553df21 Mon Sep 17 00:00:00 2001
From: Ryan Alexander <38785445+ryanalexander@users.noreply.github.com>
Date: Tue, 17 Aug 2021 19:33:09 +1000
Subject: [PATCH 2/4] Lowered contrast threshold

---
 src/pages/settings/panes/Appearance.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/settings/panes/Appearance.tsx b/src/pages/settings/panes/Appearance.tsx
index 7ad56cb1..1c237da8 100644
--- a/src/pages/settings/panes/Appearance.tsx
+++ b/src/pages/settings/panes/Appearance.tsx
@@ -461,5 +461,5 @@ function getContrastingColour(hex: string) {
     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";
+    return cc >= 75 ? "black" : "white";
 }

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 3/4] 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) {
                                 />
                             </div>
                             <span
-                                style={`color: ${
-                                    theme[x].toUpperCase() === "TRANSPARENT"
-                                        ? getContrastingColour(
-                                              theme["primary-background"],
-                                          )
-                                        : getContrastingColour(theme[x])
-                                }`}>
+                                style={`color: ${getContrastingColour(
+                                    theme[x],
+                                    theme["primary-background"],
+                                )}`}>
                                 {x}
                             </span>
                             <div className={styles.override}>
@@ -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");
+    }
 }

From b60d590385363f077c8a2b0066f3d438fce19731 Mon Sep 17 00:00:00 2001
From: Ryan Alexander <38785445+ryanalexander@users.noreply.github.com>
Date: Thu, 19 Aug 2021 00:05:23 +1000
Subject: [PATCH 4/4] Update Appearance.tsx

---
 src/pages/settings/panes/Appearance.tsx | 16 +++++++---------
 1 file changed, 7 insertions(+), 9 deletions(-)

diff --git a/src/pages/settings/panes/Appearance.tsx b/src/pages/settings/panes/Appearance.tsx
index 1e4ca2ac..478acb1e 100644
--- a/src/pages/settings/panes/Appearance.tsx
+++ b/src/pages/settings/panes/Appearance.tsx
@@ -453,14 +453,12 @@ export const Appearance = connectState(Component, (state) => {
 });
 
 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) {
+    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;
+    if (isNaN(r) || isNaN(g) || isNaN(b) || isNaN(cc))
         return getContrastingColour(fallback, "#fffff");
-    }
+    return cc >= 175 ? "black" : "white";
 }