fix(a11y): unreadable image captcha with dark themes (#7390)

- When the user has a dark theme selected, image captchas are sometimes unreadable.
- Make sure the image captcha always has a white background color.

Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/7390
Reviewed-by: 0ko <0ko@noreply.codeberg.org>
Reviewed-by: Beowulf <beowulf@beocode.eu>
Reviewed-by: Gusted <gusted@noreply.codeberg.org>
Co-authored-by: Andreas Shimokawa <shimokawa@fsfe.org>
Co-committed-by: Andreas Shimokawa <shimokawa@fsfe.org>
This commit is contained in:
Andreas Shimokawa 2025-03-30 14:51:37 +00:00 committed by Gusted
parent 2348955af5
commit 86039a89fc

View file

@ -1,7 +1,7 @@
{{if .EnableCaptcha}}{{if eq .CaptchaType "image"}}
<div class="inline field tw-text-center">
<input type="hidden" name="img-captcha-id" value="{{.Captcha}}">
<img style="transform: scaleX(-1)" onclick="this.src=`{{AppSubUrl}}/captcha/{{.Captcha}}.png?reload=${Date.now()}`" class="captcha-img" src="{{AppSubUrl}}/captcha/{{.Captcha}}.png" alt="{{ctx.Locale.Tr "captcha"}}">
<img style="transform: scaleX(-1);background-color: white" onclick="this.src=`{{AppSubUrl}}/captcha/{{.Captcha}}.png?reload=${Date.now()}`" class="captcha-img" src="{{AppSubUrl}}/captcha/{{.Captcha}}.png" alt="{{ctx.Locale.Tr "captcha"}}">
</div>
<div class="required field {{if .Err_Captcha}}error{{end}}">
<label for="captcha">{{ctx.Locale.Tr "captcha"}}</label>