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;
}

.oute {
  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="/"></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="oute">
    <div class="error"></div>
    <div class="success">
      Success! Your Stripe token is <span class="token"></span>
    </div>
  </div>
</form>

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;
}

.oute {
  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./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="oute">
    <div class="error"></div>
    <div class="success">
      Success! Your Stripe token is <span class="token"></span>
    </div>
  </div>
</form>

• javascript
• stripe-payments

1 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./docs/js/element/other_methods/update?type=card