We can pass theme: 'dark' in hcaptcha.render(), so we should see if that helps this situation.

I was not able to change the apperance of the captcha when passing theme=dark to the render call (I also tried other approaches without success, such as using a data- attribute).

However, I think we could use custom javascript code to resize the iframe that contains the challenge in order to prevent it from taking the whole screen (and, therefore, prevent the full document background to become white) with something like this:

let container = $('#h-captcha');
let iframe = container.find('iframe[title="Widget containing checkbox for hCaptcha security challenge"]');
iframe.width(320);
iframe.height(380);
iframe.css('top', ($('body').height() / 2) - (iframe.height() / 2));
iframe.css('left', ($('body').width() / 2) - (iframe.width() / 2));

However, if we follow this patch, the width & height to use should be computed dynamically, as the contents in the iframe are not always the same.

(it should be also possible to use a similar approach for just setting the background of the document within the iframe to black -- but I'm not sure we could make the iframe background transparent to reveal the contents behind, which would likely require using the approach for resizing it instead).

In T408795#11335437, @hector.arroyo wrote:

I was not able to change the apperance of the captcha to change when passing theme=dark to the render call (I also tried other approaches without success, such as using a data- attribute).

Can we try to solve that first? AFAICS we would want the hCaptcha challenge to be in dark mode when the site is in dark mode.

In T408795#11335437, @hector.arroyo wrote:

However, I think we could use custom javascript code to resize the iframe that contains the challenge in order to prevent it from taking the whole screen (and, therefore, prevent the full document background to become white) with something like this:

let container = $('#h-captcha');
let iframe = container.find('iframe[title="Widget containing checkbox for hCaptcha security challenge"]');
iframe.width(320);
iframe.height(380);
iframe.css('top', ($('body').height() / 2) - (iframe.height() / 2));
iframe.css('left', ($('body').width() / 2) - (iframe.width() / 2));

This seems a bit hacky and likely to cause a content flash because;

• This JS code would need to wait for the hCaptcha challenge to be shown
• A paint of the page would have already occurred by the time this code executes, and so for a short time the user will see the wrong version (with the large white background)

In T408795#11335616, @Dreamy_Jazz wrote:

• A paint of the page would have already occurred by the time this code executes, and so for a short time the user will see the wrong version (with the large white background)

A priori, I think that could be solved by having visibility:hidden in the hCaptcha container when it is first shown, switching it to visibility:block once we have changed its size.