Google reCaptcha V2 Dark Theme

This article will provide a few workarounds to render a Google reCaptcha V2 with a dark theme while using the Classic Universal Login with Auth0.js.

• Classic Universal Login
• Google reCaptcha V2

There are two workarounds available:

Workaround 1

Clone the relevant Auth0.js code, update it, and personally host it. 

• Auth0 Github Code Example 1
• Auth0 Github Code Example 2
  
  

Workaround 2

Update the Login template using the example below:

NOTE: This solution may have unexpected results. Please test in a lower environment before deploying to production.

...
<div class="captcha-container form-group" style="display:none"></div>
<div class="captcha-container2 form-group"></div>
...
<script src="https://cdn.auth0.com/js/polyfills/1.0/object-assign.min.js"></script>
<script src="https://www.google.com/recaptcha/api.js"></script>
...
var captcha = webAuth.renderCaptcha(
    document.querySelector('.captcha-container')
);
var captchaResponse;
    var verifyCallback = function(response) {
    captchaResponse = response;
};
var captcha = grecaptcha.render(document.querySelector('.captcha-container2'), {
    'sitekey' : '<site key that matches key in the Bot Protection Config>',
    'callback': verifyCallback,
    'theme' : 'dark'
});
...
webAuth.login({
     realm: databaseConnection,
     username: username,
     password: password,
     captcha: captchaResponse
}
...