Recaptcha dark theme setting possible?

Hello

My netlify site name is: https://rolandlevy.netlify.app and my custom domain is: https://rolandlevy.co.uk

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.

Thanks,
Roland

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?


Jon

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: https://rolandlevy.co.uk

I found this thread which comes to the same conclusion: https://forums.modx.com/thread/99538/recaptcha-v2-how-to-change-it-s-theme

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!
Roland

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:

Cheers!


Jon

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:

Cheers!
Roland

1 Like