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

Posted 2023-03-21

【中文标题】如何在暗模式下更改条纹样式？

【英文标题】：How to change Stripe styles in dark mode?

【发布时间】：2021-02-10 04:58:22

【问题描述】：

我必须为深色模式更改条纹输入的颜色。但我找不到这个选项。有什么办法吗？下面的例子解释了我的情况。

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="[phone]" 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>

【参考方案1】：

每当您点击“切换暗模式”按钮时，您都可以使用cardElement.update(); 更新卡片元素的样式。

此处的文档：https://stripe.com/docs/js/element/other_methods/update?type=card