ASP.NET Core MVC中如何设置reCaptcha深色主题？配置不生效如何解决？

问题原因 #

你当前的配置未生效主要有两个核心问题：

1. 配置加载顺序错误：RecaptchaOptions 全局变量需要在reCAPTCHA的API脚本加载前定义，API初始化时才会读取该配置，你当前的代码是先加载API再定义配置，自然不会生效。
2. 版本适配问题：如果你用的是reCAPTCHA v3（无交互式、仅右下角显示小徽章的版本），官方本身没有提供主题切换的公开配置参数，需要通过CSS样式覆盖实现深色效果。

解决方案 #

情况1：使用reCAPTCHA v2（带复选框交互的版本）

调整脚本加载顺序，同时可以直接在reCAPTCHA容器上配置深色主题属性，示例代码如下：

@section Scripts {
    <!-- 先定义全局配置，再加载API -->
    <script type="text/javascript">
        var RecaptchaOptions = {
            theme : 'dark'
        };
    </script>
    <!-- 加载API时不要带render参数，该参数是v3版本使用的 -->
    <script src="https://www.google.com/recaptcha/api.js"></script>
    <script>
        grecaptcha.ready(function() {
            grecaptcha.execute(
                '@Configuration["Recaptcha:siteKey"]', { action: 'contact' })
                .then(function (token) {
                    $("#captchaInput").val(token);
                });
        });
    </script>
    <!-- 页面上的reCAPTCHA容器，加data-theme属性指定深色主题 -->
    <div class="g-recaptcha" 
         data-sitekey="@Configuration["Recaptcha:siteKey"]" 
         data-theme="dark">
    </div>

    <partial name="_ValidationScriptsPartial" />
}

情况2：使用reCAPTCHA v3（仅显示徽章的无交互版本）

直接添加CSS样式覆盖默认的徽章样式即可实现深色效果：

<style>
    .grecaptcha-badge {
        /* 调整滤镜参数适配你的深色页面风格 */
        filter: invert(0.9) hue-rotate(180deg) brightness(0.8);
    }
</style>

内容的提问来源于stack exchange，提问作者Boppity Bop