title: How do I detect dark mode using JavaScript?
body: <p>Windows and macOS now have dark mode.</p>
  <p>For CSS I can use:</p>
  <pre class="lang-css prettyprint-override"><code>@media (prefers-dark-interface) { 
    color: white; background: black 
  }
  </code></pre>
  <p>But I am using <a href="https://stripe.com/docs/stripe-js/reference#the-elements-object" rel="noreferrer">the Stripe Elements API, which puts colors in JavaScript</a></p>
  <p>For example:</p>
  <pre class="lang-js prettyprint-override"><code>const stripeElementStyles = {
    base: {
      color: COLORS.darkGrey,
      fontFamily: `-apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, &quot;Noto Sans&quot;, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;`,
      fontSize: '18px',
      fontSmoothing: 'antialiased',
      '::placeholder': {
        color: COLORS.midgrey
      },
      ':-webkit-autofill': {
        color: COLORS.icyWhite
      }
    }
  }
  </code></pre>
  <p><strong>How can I detect the OS's preferred color scheme in JavaScript?</strong></p>