This native integration would primarily be useful for dark mode versions of websites or entirely dark pages (by default) to more cohesively control the tones of the page... you know, to prevent otherwise “luma-balanced” content with the exception of a big, white, glaring rectangle in the middle of the page.

This is not custom CSS styling to the reCAPTCHA element itself (or children elements), but rather a different preset style choice (see attached image) to choose from, prior to rendering it onpage.

Somewhat interestingly, I have actually got this dark theme to intermittently work on Webflow by using custom global JS code in the footer and hacking together this repetitive, and admittedly janky pseudo-solution (there seems to be an attribute or argument to pre-specify this dark theme when loading reCAPTCHA):

jQuery(function(a) {

a(".g-recaptcha").attr("data-theme", "dark"),

grecaptcha.render(a("form>*.recaptcha-wrapper>div.recaptcha").get(0), {

sitekey: "hidden",

theme: "dark",

});

}),

$("form>*.recaptcha-wrapper>div.recaptcha").addClass(".g-recaptcha"),

grecaptcha.render($("form>*.recaptcha-wrapper>div.recaptcha").get(0), {

sitekey: "hidden",

theme: "dark",

}),

Defer(function() {

$(".g-recaptcha").attr("data-theme", "dark");

});

recaptcha_theme...

×

Attachments Open full size