Merge pull request #5 from AlexStack/dev

Add theme-dark and no-api-js

Author: AlexStack

README.md

@@ -59,7 +59,7 @@ GoogleRecaptcha::show($SiteKey, 'Form_ContactForm_Message', 'no_debug', 'mt-4 mb
   - '\$SiteKey': The Google Recaptcha Site Key of your website. You can directly put site key here or a variable or from database.
   - 'Form_ContactForm_Message': Form_Field_ID, via html code. eg. ... `<input type="text" id="Form_ContactForm_Message" />` ... Your Google Recaptcha will display after this form field.
   - 'no_debug': Change to debug and not tick the I'm not a robot checkbox will continue submit the form, then you will see the failed message.
-  - 'mt-4 mb-1': Extra css class name for the Google Recaptcha area.
+  - 'mt-4 mb-1': Extra css class name for the Google Recaptcha area. For recaptcha v2: Add theme-dark if you want the dark theme instead of the light. Add no-api-js if you already import the recaptcha/api.js.
   - 'Please tick the reCAPTCHA checkbox first': Frontend alert message if the end user does not tick the checkbox. **Tips:** You can change this value to "v3", it will automatically switch to use Google Recaptcha v3
 - Default value of the parameters of the show() method
 

src/AlexStack/GoogleRecaptchaToAnyForm/GoogleRecaptcha.php

@@ -100,11 +100,20 @@ public static function show($site_key, $after_field_id = 'Form_ContactForm_Comme
             return Self::showInvisible($site_key, $after_field_id, $debug, $extra_class);
         }
 
+        $api_js_str = "<script src='https://www.google.com/recaptcha/api.js'></script>";
+        if ( strpos($extra_class, 'no-api-js') !== false  ){
+            $api_js_str = "";
+        }
+        $data_theme = 'light';
+        if ( strpos($extra_class, 'theme-dark') !== false  ){
+            $data_theme = "dark";
+        }
+
         $debug_alert = ($debug == 'no_debug') ? 'false' : 'true';
         $str = <<<EOF
         <!-- Start of the Google Recaptcha v2 code -->
  
-        <script src='https://www.google.com/recaptcha/api.js'></script>
+        $api_js_str
         <script>
  
             // Display google recaptcha
@@ -123,7 +132,7 @@ function alexFindClosestNode(el, selector) {
 
             var alexEL = document.getElementById('$after_field_id');
             if ( alexEL )   {
-                alexEL.parentNode.insertAdjacentHTML('afterend', '<div class="g-recaptcha $extra_class" data-sitekey="$site_key"></div>');
+                alexEL.parentNode.insertAdjacentHTML('afterend', '<div class="g-recaptcha $extra_class" data-sitekey="$site_key" data-theme="$data_theme"></div>');
 
                 // Validate google recaptcha before submit the form
                 alexFindClosestNode(alexEL,'form').addEventListener('submit',function(e){