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");
});
Matthew Penkala
.svg){kind=logo}
How to change the reCAPTCHA’s color theme
By default, the reCAPTCHA element has a light theme with a grey background and black text. You can switch it to a dark theme with a black background and white text. To add a dark theme:
Select the reCAPTCHA element on the canvas
Go to Element settings > Custom attributes
Click the “plus” icon
Type “data-theme” in the Name field
Type “dark” in the Value field