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