Captcha in dark view

In dark theme captcha is showing in white background with some white space, resolved by using css filters close: #7981 Co-authored-by: paw <[email protected]>
tutao · Nov 25, 2024 · 5882e38 · 5882e38
1 parent fa4b486
commit 5882e38
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 4 deletions.
diff --git a/src/common/gui/base/Color.ts b/src/common/gui/base/Color.ts
@@ -21,12 +21,20 @@ export function isValidCSSHexColor(colorCode: string): boolean {
 	return isValidColorCode(colorCode) && CSS.supports("color", colorCode)
 }
 
-export function isColorLight(c: string): boolean {
+export function getColorLuminance(c: string): number {
 	const { r, g, b } = hexToRgb(c)
 	// Counting the perceptive luminance
 	// human eye favors green color...
-	const a = 1 - (0.299 * r + 0.587 * g + 0.114 * b) / 255
-	return a < 0.5
+	return (0.299 * r + 0.587 * g + 0.114 * b) / 255
+}
+
+export function isMonochrome(c: string): boolean {
+	const { r, g, b } = hexToRgb(c)
+	return r == g && g == b
+}
+
+export function isColorLight(c: string): boolean {
+	return getColorLuminance(c) > 0.5
 }
 
 export function normalizeHueAngle(hue: number): number {

diff --git a/src/common/subscription/Captcha.ts b/src/common/subscription/Captcha.ts
@@ -10,6 +10,8 @@ import { lang } from "../misc/LanguageViewModel.js"
 import m, { Children } from "mithril"
 import { TextField } from "../gui/base/TextField.js"
 import { uint8ArrayToBase64 } from "@tutao/tutanota-utils"
+import { theme } from "../gui/theme"
+import { getColorLuminance, isMonochrome } from "../gui/base/Color"
 
 /**
  * Accepts multiple formats for a time of day and always returns 12h-format with leading zeros.
@@ -142,12 +144,21 @@ function showCaptchaDialog(challenge: Uint8Array, token: string): Promise<string
 
 		dialog = new Dialog(DialogType.EditSmall, {
 			view: (): Children => {
+				// The captcha is black-on-white, which will not look correct on anything where the background is not
+				// white. We can use CSS filters to fix this.
+				let captchaFilter = {}
+				if (theme.elevated_bg != null && isMonochrome(theme.elevated_bg)) {
+					captchaFilter = {
+						filter: `invert(${1.0 - getColorLuminance(theme.elevated_bg)}`,
+					}
+				}
 				return [
 					m(DialogHeaderBar, actionBarAttrs),
 					m(".plr-l.pb", [
-						m("img.mt-l", {
+						m("img.pt-ml.center-h.block", {
 							src: imageData,
 							alt: lang.get("captchaDisplay_label"),
+							style: captchaFilter,
 						}),
 						m(TextField, {
 							label: () => lang.get("captchaInput_label") + " (hh:mm)",