Recaptcha dark theme setting possible?


My netlify site name is: and my custom domain is:

I am using recaptcha in a netlify form, like this: <div data-netlify-recaptcha="true"></div>

Is there a way of setting it to dark mode? At the moment it is appearing in light mode and doesn’t look very good.

The setting from Google documentation is: data-theme="dark" but I don’t know how to implement it.

I have tried customising the recaptcha with the following CSS but it doesn’t work:

.rc-anchor-light.rc-anchor-normal {
  border: 1px solid #666 !important;

.rc-anchor-light {
  background: #333 !important;
  color: #fff !important;

.recaptcha-checkbox-border {
  background-color: #333 !important;
  border: 2px solid #666 !important;

Can anyone offer some help or ideas on this? Or is this a feature that can be added?

Looking forward to hearing from the community.


Hi Roland :wave:t2:

I found the same conclusion you’re at some time ago. Personally, I also realized that Netlify’s form systems are pretty great about catching spam, and a honeypot field was more than enough to do the magic for me (so I just stopped using the reCaptcha and haven’t had any issues)

But if you are sure you want to use the reCaptcha, I’m with you - there’s no way to pass through to Netlify a desire to have data-theme="dark" present in the parent node that Netlify generates for you.

I haven’t tried this, and I don’t actually have any sites left personally using the reCaptcha to test it on, but I wonder if you could wire up a small js function to target the necessary parent node and inject the data-theme attribute into it on page load. Would you be open to trying something like that?


Hi Jon! :wave:

Thanks so much for your suggestion. I tried what you said and it worked a treat!

Here’s the javaScript that injects the data-theme attribute:

document.addEventListener('DOMContentLoaded', (event) => {
  const recaptcha = document.querySelector('.g-recaptcha');
  recaptcha.setAttribute("data-theme", "dark");

Here it is in action:

I found this thread which comes to the same conclusion:

It says that changing CSS styles won’t affect the recaptcha because it’s inside an iframe. I was trying that for a while and it just wouldn’t work

I’m really grateful for your help with this.

Thanks again!

1 Like

Hey that works super well! Love to see it :heart_eyes: Thanks for posting back the code too. I’ll have to keep this one in my own back pocket for if/when I get back to using a reCaptcha down the road. Good stuff :slight_smile:



Hey Jon,

Cool - good luck on your journey. It’s kind of you to support people in the netlify community. Also, great website by the way! :+1:


1 Like

You are a lifesaver Roland, thank you!

Hi Goran,

You’re very welcome - that’s great that it helped and hopefully saved you some time.


1 Like