title: Using CSS Variables on Stripe Elements
body: <p>I am using <code>Stripe Elements</code> for a credit card checkout. The issue is, that I am not able (or I simply don't know how) to use my own <code>CSS variables</code> on this <code>Stripe Element</code>.
  I need to use <code>CSS variables</code> for the sake of changing colors when the user changes the theme. Here is my current implementation:</p>
  
  <p><strong>Variable definitions</strong> (I'm using SASS)</p>
  
  <pre><code>.theme1
      --color-1: red
      --color-2: pink
      // ...
  .theme2
      --color-1: blue
      --color-2: lilec
      // ...
  .theme3
      --color-1: orange
      --color-2: yellow
      // ...
  // ...
  </code></pre>
  
  <p>The <code>CSS variables</code> are defined under the scope of a class, that is put to the <code>body</code> depending which theme is currently selected.</p>
  
  <p><strong>HTML</strong> (I am using Angular 6)</p>
  
  <pre><code>&lt;div #stripe&gt;&lt;/div&gt;
  </code></pre>
  
  <p><strong>Typescript</strong></p>
  
  <pre><code>    @ViewChild('stripe') el: ElementRef;
      card: any;
      cardHandler = this.onChange.bind(this);
      async onSubmit() { /* ... */ }
  
      setupStripe(): void {
          this.card = stripeElements.create('card', {
              iconStyle: 'solid',
              style: {
                  base: {
                      iconColor: 'var(--some-var)',
                      // using css variables here does not work
                      // ...
                  },
              }
          });
          this.card.mount(this.el.nativeElement);
          this.card.addEventListener('change', this.cardHandler);
      }
      destroyStripe(): void {
          this.card.removeEventListener('change', this.cardHandler);
          this.card.destroy();
      }
  
      ngAfterViewInit() {
          this.setupStripe();
      }
  
      ngOnDestroy() {
          this.destroyStripe();
      }
  
      onChange({ error }) { /* ... */ }
  </code></pre>
  
  <p><strong>Styles</strong> (I am using SASS)</p>
  
  <pre><code>.StripeElement
      background-color: var(--dy-bg-1)
      // I don't have access to font colors etc here
      color: var(--dy-txt-1) !important
      // !important also does not work
  </code></pre>
  
  <p>P.S.: It's important for me, that the variables will change at runtime (which is the reason I'm using CSS variables.</p>