如何动态切换Google reCAPTCHA (v2)主题？适配Bootstrap明暗模式

直接操作iframe内的rc-anchor-light/rc-anchor-dark类之所以失败，核心原因是浏览器同源策略限制——reCAPTCHA的iframe属于Google域名，和你的网站域名不同，JavaScript无法跨域修改iframe内部的DOM元素。

正确的实现方式是借助Google reCAPTCHA官方API，销毁当前实例后重新渲染，指定对应主题：

• 第一步：给reCAPTCHA容器设置固定ID，方便后续操作

<div id="g-recaptcha-container" class="g-recaptcha" data-sitekey="你的站点密钥"></div>

• 第二步：在主题切换的JS函数中执行以下逻辑

// 主题切换触发的函数，可根据你的实际场景调整触发方式
function switchRecaptchaTheme() {
  // 获取当前要切换的主题（示例：根据页面根元素的dark-mode类判断）
  const targetTheme = document.documentElement.classList.contains('dark-mode') ? 'dark' : 'light';
  
  // 获取reCAPTCHA容器并清空原有内容
  const recaptchaBox = document.getElementById('g-recaptcha-container');
  recaptchaBox.innerHTML = '';
  
  // 重新渲染reCAPTCHA，指定目标主题
  grecaptcha.render('g-recaptcha-container', {
    sitekey: '你的站点密钥',
    theme: targetTheme
  });
}

• 额外优化：如果需要记住用户的主题偏好，可以将主题值存入localStorage，页面初始化时读取存储值，直接渲染对应主题的reCAPTCHA。

注意：确保调用grecaptcha.render()前，Google reCAPTCHA的脚本已经加载完成，避免出现grecaptcha未定义的错误。

内容的提问来源于stack exchange，提问作者Ajinkya More