如何在黑暗模式下更改条纹样式？

Question

I have to change the color of the stripe input for dark mode. But I couldn't find an option for this. Is there any way? The example below explains the my case.

 var stripe = Stripe('pk_test_6pRNASCoBOKtIshFeQd4XMUh'); var elements = stripe.elements(); var card = elements.create('card', { style: { base: { iconColor: '#666EE8', color: 'green', // I want to make this yellow in dark mode lineHeight: '40px', fontWeight: 300, fontFamily: '"Helvetica Neue", Helvetica, sans-serif', fontSize: '15px', '::placeholder': { color: '#CFD7E0', }, }, } }); card.mount('#card-element'); document.querySelector(".toggle-dark-mode").onclick = function(){ document.body.classList.toggle("dark-mode"); }

 * { font-family: "Helvetica Neue", Helvetica; font-size: 15px; font-variant: normal; padding: 0; margin: 0; } html { height: 100%; } body { background: #E6EBF1; align-items: center; min-height: 100%; display: flex; width: 100%; } form { width: 480px; margin: 20px auto; } .group { background: white; border-radius: 4px; margin-bottom: 20px; } label { position: relative; color: #8898AA; font-weight: 300; height: 40px; line-height: 40px; margin-left: 20px; display: block; } .group label:not(:last-child) { border-bottom: 1px solid #F0F5FA; } label>span { width: 20%; text-align: right; float: left; } .field { background: transparent; font-weight: 300; border: 0; color: #31325F; outline: none; padding-right: 10px; padding-left: 10px; cursor: text; width: 70%; height: 40px; float: right; } .field::-webkit-input-placeholder { color: #CFD7E0; } .field::-moz-placeholder { color: #CFD7E0; } .field:-ms-input-placeholder { color: #CFD7E0; } .btn { float: left; display: block; background: #666EE8; color: white; border-radius: 4px; border: 0; margin-top: 20px; font-size: 15px; font-weight: 400; width: 100%; height: 40px; line-height: 38px; outline: none; } .btn:focus { background: #555ABF; } .btn:active { background: #43458B; } .outcome { float: left; width: 100%; padding-top: 8px; min-height: 24px; text-align: center; } .success, .error { display: none; font-size: 13px; } .success.visible, .error.visible { display: inline; } .error { color: #E4584C; } .success { color: #666EE8; } .success .token { font-weight: 500; font-size: 13px; } .toggle-dark-mode { position:fixed; left:20px; top:20px; } .dark-mode { background: #444; } .dark-mode .group { background: #666; }

 <script src="https://js.stripe.com/v3/"></script> <button class="toggle-dark-mode">Toggle Dark Mode</button> <form> <div class="group"> <label> <span>Name</span> <input name="cardholder-name" class="field" placeholder="Jane Doe" /> </label> <label> <span>Phone</span> <input class="field" placeholder="(123) 456-7890" type="tel" /> </label> </div> <div class="group"> <label> <span>Card</span> <div id="card-element" class="field"></div> </label> </div> <button class="btn" type="submit">Pay $25</button> <div class="outcome"> <div class="error"></div> <div class="success"> Success! Your Stripe token is <span class="token"></span> </div> </div> </form>

Answer 1

Whenever your "Toggle dark mode" button is clicked, you can update the card element's style using cardElement.update(); .

Documentation here: https://stripe.com/docs/js/element/other_methods/update?type=card