如何在Stripe.js中为支付元素适配暗黑模式样式？

方法一：在Appearance API中直接嵌套媒体查询（推荐） #

Stripe的Appearance API支持在样式规则中直接嵌入媒体查询，无需额外JS逻辑，就能自动跟随系统的颜色模式切换：

let options = {
    appearance: {
        rules: {
            '.Label': {
                color: 'black',
                // 暗黑模式下的样式
                '@media (prefers-color-scheme: dark)': {
                    color: 'white'
                }
            },
        },
    },
};

let stripe = Stripe(process.env.STRIPE_PUBLISHABLE_KEY);
let elements = stripe.elements(options);
let paymentElement = elements.create('payment');
paymentElement.mount('#payment-element');

方法二：监听颜色模式变化，重新创建Payment Element #

如果需要支持手动切换暗黑模式（而非仅跟随系统），可以通过卸载旧元素、重新创建新元素的方式实现：

let stripe = Stripe(process.env.STRIPE_PUBLISHABLE_KEY);
let elements = stripe.elements();
let paymentElement;

// 初始化元素的函数
function initPaymentElement(isDarkMode) {
    // 如果已有元素，先卸载
    if (paymentElement) {
        paymentElement.unmount();
    }
    // 根据模式生成配置
    const appearanceOptions = {
        rules: {
            '.Label': {
                color: isDarkMode ? 'white' : 'black'
            }
        }
    };
    // 创建并挂载新元素
    paymentElement = elements.create('payment', { appearance: appearanceOptions });
    paymentElement.mount('#payment-element');
}

// 初始加载时根据系统模式初始化
const isSystemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
initPaymentElement(isSystemDark);

// 监听系统颜色模式变化
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
    initPaymentElement(e.matches);
});

// 若有手动切换按钮，可调用此函数
// document.getElementById('dark-mode-toggle').addEventListener('click', () => {
//     initPaymentElement(!isSystemDark);
// });

为什么update() API不可用？ #

Stripe的payment.update()方法仅支持修改支付相关的配置参数（如金额、货币），不允许修改元素的外观样式。Appearance配置只能在元素创建时传入，因此无法通过update()动态修改。

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