# Customizing colors on \`square.js\` card form -- Documention incorrect

**URL:** <https://developer.squareup.com/forums/t/customizing-colors-on-square-js-card-form-documention-incorrect/9280>\
**Category:** Questions\
**Created:** [April 23, 2023, 3:22am UTC](https://developer.squareup.com/forums/t/customizing-colors-on-square-js-card-form-documention-incorrect/9280 "2023-04-23T03:22:22Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![grawergf](https://avatars.discourse-cdn.com/v4/letter/g/f475e1/32.png) [@grawergf](https://developer.squareup.com/forums/u/grawergf)\
**Post date:** [April 23, 2023, 3:22am UTC](https://developer.squareup.com/forums/t/customizing-colors-on-square-js-card-form-documention-incorrect/9280/1 "2023-04-23T03:22:22Z")

</div>

The colors of the card form look out of place and hard to read in a dark theme. Other form elements would use a darker background.

 ![image](https://global.discourse-cdn.com/square/original/2X/e/e75e9a416b79d8b321fd64794015af8d08effe33.png)

This documentation is incorrect: [https://developer.squareup.com/docs/web-payments/customize-styles](https://developer.squareup.com/docs/web-payments/customize-styles)

Though it does seem to affect text that is _outside_ of the form, like “Enter your card number”. It mentions a `dark-mode.css`, but not only is the form is in an `<iframe>` and won’t styled by that method, it doesn’t mention what the contents of that CSS file would be. Also adding `class="dark-mode"` to the body appears to have no affect on anything. Should Step 1 on that page be taken out entirely? Is it attempting to instruct users on how to add a dark mode to a page in general or something? If so, why? Is this content generated by ChatGPT?

The 2nd step, “Step 2: Define a custom style” appears to be on the right track. But it doesn’t change the form elements, possibly wrong selectors. I started to fix the selectors myself, but I have no way of knowing what will last and what won’t.

Really my main questions are this:

1. Is this form the only way to get a Card Nonce token?

2. Is there any documentation on how to customize the look of this form so that it can fit into a form when embedded into a website as intended?

---

<div class="post-metadata">

**Author:** ![Bryan-Square](https://sea1.discourse-cdn.com/square/forums/user_avatar/developer.squareup.com/bryan-square/32/38_2.png) [@Bryan-Square](https://developer.squareup.com/forums/u/Bryan-Square)\
**Post date:** [April 24, 2023, 4:28pm UTC](https://developer.squareup.com/forums/t/customizing-colors-on-square-js-card-form-documention-incorrect/9280/2 "2023-04-24T16:28:09Z")

</div>

This is the only way to get a token to pass to `CreatePayment` for processing payments with a web application. As for the styling I just tested and it works as expected with our [sample](https://github.com/square/web-payments-quickstart/blob/main/public/examples/card-styling-simple.html).

```auto
      const darkModeCardStyle = {
        '.input-container': {
          borderColor: '#2D2D2D',
          borderRadius: '6px',
        },
        '.input-container.is-focus': {
          borderColor: '#006AFF',
        },
        '.input-container.is-error': {
          borderColor: '#ff1600',
        },
        '.message-text': {
          color: '#999999',
        },
        '.message-icon': {
          color: '#999999',
        },
        '.message-text.is-error': {
          color: '#ff1600',
        },
        '.message-icon.is-error': {
          color: '#ff1600',
        },
        input: {
          backgroundColor: '#2D2D2D',
          color: '#FFFFFF',
          fontFamily: 'helvetica neue, sans-serif',
        },
        'input::placeholder': {
          color: '#999999',
        },
        'input.is-error': {
          color: '#ff1600',
        },
      };

```

🙂

---

<div class="post-metadata">

**Author:** ![grawergf](https://avatars.discourse-cdn.com/v4/letter/g/f475e1/32.png) [@grawergf](https://developer.squareup.com/forums/u/grawergf)\
**Post date:** [May 2, 2023, 11:47am UTC](https://developer.squareup.com/forums/t/customizing-colors-on-square-js-card-form-documention-incorrect/9280/3 "2023-05-02T11:47:37Z")

</div>

Using the sample @ [web-payments-quickstart/card-styling-simple.html at main · square/web-payments-quickstart · GitHub](https://github.com/square/web-payments-quickstart/blob/main/public/examples/card-styling-simple.html)

If you add the following to the `<head>`:

```auto
<style type="text/css">
html {
    color-scheme: dark;
}
</style>

```

The colors in the widget become inverted… It’s a bit baffling to me that CSS outside of the `<iframe>` has any effect inside it, but I’ve isolated what seems to be going on.

Here’s the MDN on that attribute: [color-scheme - CSS: Cascading Style Sheets | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme)

Seems like it would be reasonably common to include in themes that allow switching, I know it’s in some popular CSS frameworks (I’m using one).

The inversion would be the opposite of what one would expect when trying to style it darker… So the documentation technically isn’t incorrect, although that `dark-mode.css` step could be removed since it isn’t related to changing the Square form style (making it a bit confusing)… but there does appear to be a weird glitch when setting `color-scheme: dark;`

It looks like in my case a workaround could be, only on the page where the form shows, to add:

```auto
<style type="text/css">
:root {
	color-scheme: unset;
}
</style>

```

But I’m not sure if that will apply to all cases… definitely strange, could potentially be a browser bug (in both Chromium and FF) since one would expect no effect within the `<iframe>` based on outside CSS

---

<div class="post-metadata">

**Author:** ![Bryan-Square](https://sea1.discourse-cdn.com/square/forums/user_avatar/developer.squareup.com/bryan-square/32/38_2.png) [@Bryan-Square](https://developer.squareup.com/forums/u/Bryan-Square)\
**Post date:** [May 2, 2023, 3:47pm UTC](https://developer.squareup.com/forums/t/customizing-colors-on-square-js-card-form-documention-incorrect/9280/4 "2023-05-02T15:47:57Z")

</div>

Thanks for sharing your findings. I’m passing them along to the team. 🙂

---

<div class="post-metadata">

**Author:** ![doodi](https://avatars.discourse-cdn.com/v4/letter/d/a587f6/32.png) [@doodi](https://developer.squareup.com/forums/u/doodi)\
**Post date:** [November 20, 2023, 7:42am UTC](https://developer.squareup.com/forums/t/customizing-colors-on-square-js-card-form-documention-incorrect/9280/5 "2023-11-20T07:42:22Z")

</div>

Thank you for this thread! I was upgrading a site to use bootstrap 5.3 and was running into this dark mode issue. For me, the card-container background was white, even though I was using a dark theme. And the darkModeCardStyle values were set to the values in your examples. The font-color showed white, but the background was also white, making the entry very user unfriendly. Anyway, I started with adding the style html { color-scheme: dark; }, no joy. I then saw this :root { color-scheme: unset; } just before giving up on this thread and poof! We have joy.

I have the same question/concern though, is this a long term fix or am I on thin ice with this fix?

Via ngrok, I do have outside access to my page if someone at square would like to analyze the issue.

---

<div class="post-metadata">

**Author:** ![Bryan-Square](https://sea1.discourse-cdn.com/square/forums/user_avatar/developer.squareup.com/bryan-square/32/38_2.png) [@Bryan-Square](https://developer.squareup.com/forums/u/Bryan-Square)\
**Post date:** [November 20, 2023, 5:15pm UTC](https://developer.squareup.com/forums/t/customizing-colors-on-square-js-card-form-documention-incorrect/9280/6 "2023-11-20T17:15:24Z")

</div>

Were you using our [example that uses dark mode](https://github.com/square/web-payments-quickstart/blob/042c73641a18f2b80a8d09d3cd09f5ad61871082/public/examples/card-styling-simple.html#L14)? 🙂

---

<div class="post-metadata">

**Author:** ![doodi](https://avatars.discourse-cdn.com/v4/letter/d/a587f6/32.png) [@doodi](https://developer.squareup.com/forums/u/doodi)\
**Post date:** [November 21, 2023, 12:07am UTC](https://developer.squareup.com/forums/t/customizing-colors-on-square-js-card-form-documention-incorrect/9280/7 "2023-11-21T00:07:21Z")

</div>

Yes, the dark mode example. It worked with the prior home-grown dark mode. Switching to bootstrap 5.3 broke something and somehow, :root { color-scheme: unset; } seems to fix the issue.

---

<div class="post-metadata">

**Author:** ![Bryan-Square](https://sea1.discourse-cdn.com/square/forums/user_avatar/developer.squareup.com/bryan-square/32/38_2.png) [@Bryan-Square](https://developer.squareup.com/forums/u/Bryan-Square)\
**Post date:** [November 21, 2023, 12:18am UTC](https://developer.squareup.com/forums/t/customizing-colors-on-square-js-card-form-documention-incorrect/9280/8 "2023-11-21T00:18:42Z")

</div>

Okay, thank you for sharing. I’ll pass it along. 🙂

---

<div class="post-metadata">

**Author:** ![yourmenu\_dev](https://sea1.discourse-cdn.com/square/forums/user_avatar/developer.squareup.com/yourmenu_dev/32/7454_2.png) [@yourmenu\_dev](https://developer.squareup.com/forums/u/yourmenu_dev)\
**Post date:** [September 13, 2024, 6:59pm UTC](https://developer.squareup.com/forums/t/customizing-colors-on-square-js-card-form-documention-incorrect/9280/9 "2024-09-13T18:59:21Z")

</div>

@Bryan-Square: Is there any way we can add a meta tag to the iframe (i.e., `<meta name="color-scheme" content="light dark">`) to tell the iframe what color mode it can/should render in?

The suggested `:root { color-scheme: unset; }` did not help me, and actually just the styles of the host page.

See extensive experimentation from StackBlitz here about this issue with iframes and dark mode: [Transparent iframes and dark mode](https://fvsch.com/transparent-iframes)

---

<div class="post-metadata">

**Author:** ![Bryan-Square](https://sea1.discourse-cdn.com/square/forums/user_avatar/developer.squareup.com/bryan-square/32/38_2.png) [@Bryan-Square](https://developer.squareup.com/forums/u/Bryan-Square)\
**Post date:** [September 13, 2024, 7:43pm UTC](https://developer.squareup.com/forums/t/customizing-colors-on-square-js-card-form-documention-incorrect/9280/10 "2024-09-13T19:43:57Z")

</div>

The Square Web Payments SDK, you typically do not have direct control over the content of the iframe that Square injects into your page. This iframe is managed by Square and is designed to securely handle sensitive payment information. Therefore, injecting custom meta tags or directly modifying the content of the iframe is not supported due to security and integrity reasons.

### Handling Dark Mode with the Square Web Payments SDK

While you cannot directly add a meta tag to the iframe, you can still influence the appearance of the iframe to some extent using the available customization options provided by the SDK.

Square allows you to customize the appearance of the payment form using CSS variables. These variables can be used to adjust the colors and other styles to better match your site’s theme, including dark mode.

### Example: Customizing the Payment Form for Dark Mode

Here is an example of how you can customize the Square payment form to support dark mode using the CSS variables provided by the SDK:

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Square Web Payments SDK</title>
  <style>
    body {
      background-color: #121212;
      color: #ffffff;
    }

    /* Custom styles for the Square payment form */
    .sq-payment-form {
      --sq-background-color: #121212;
      --sq-text-color: #ffffff;
      --sq-border-color: #ffffff;
      --sq-placeholder-color: #888888;
      --sq-input-background-color: #1e1e1e;
    }
  </style>
  <script src="https://sandbox.web.squarecdn.com/v1/square.js"></script>
</head>
<body>
  <div id="payment-form"></div>

  <script>
    async function initializeSquarePayments() {
      const payments = Square.payments('YOUR_APPLICATION_ID', 'YOUR_LOCATION_ID');

      const card = await payments.card();
      await card.attach('#payment-form');

      // Handle form submission
      const form = document.getElementById('payment-form');
      form.addEventListener('submit', async (event) => {
        event.preventDefault();
        const result = await card.tokenize();
        if (result.status === 'OK') {
          console.log('Tokenization succeeded:', result.token);
          // Handle the successful tokenization
        } else {
          console.error('Tokenization failed:', result.errors);
          // Handle the tokenization failure
        }
      });
    }

    initializeSquarePayments();
  </script>
</body>
</html>

```

1. **CSS Variables** : The `.sq-payment-form` class is used to define CSS variables that customize the appearance of the payment form. This includes background color, text color, border color, placeholder color, and input background color. These variables are applied to the elements within the Square iframe.

2. **Dark Mode Styles** : The styles are set to match a dark mode theme, with a dark background and light text.

3. **Square Payments Initialization** : The Square Payments SDK is initialized, and the payment form is attached to the `#payment-form` element.

By customizing the CSS variables, you can have a dark mode appearance for the Square payment form without directly modifying the iframe content. 🙂

---

<div class="post-metadata">

**Author:** ![babalugats76](https://avatars.discourse-cdn.com/v4/letter/b/a8b319/32.png) [@babalugats76](https://developer.squareup.com/forums/u/babalugats76)\
**Post date:** [January 21, 2025, 1:05am UTC](https://developer.squareup.com/forums/t/customizing-colors-on-square-js-card-form-documention-incorrect/9280/11 "2025-01-21T01:05:43Z")

</div>

I am still struggling with this and would appreciate if anyone can help me get this to work. My card container looks just like the original post. I am in a Nuxt/Vue context, but everything in terms of my Square implementation is working except this one piece.

I have tried every conceivable way of affecting the `backgroundColor` but to no avail. Yes, I have examined the quickstart, the docs, the forums, tried the CSS variables above, etc., and none of it works.

For whatever reason, `backgroundColor` is not set whenever I attached a credit card with:

```auto
const darkModeCardStyle = {
    '.input-container': {
      borderColor: '#2D2D2D',
      borderRadius: '6px',
    },
    '.input-container.is-focus': {
      borderColor: '#006AFF',
    },
    '.input-container.is-error': {
      borderColor: '#ff1600',
    },
    '.message-text': {
      color: '#999999',
    },
    '.message-icon': {
      color: '#999999',
    },
    '.message-text.is-error': {
      color: '#ff1600',
    },
    '.message-icon.is-error': {
      color: '#ff1600',
    },
    input: {
      backgroundColor: '#2D2D2D',
      color: '#FFFFFF',
      fontFamily: 'Helvetica',
    },
    'input::placeholder': {
      color: '#999999',
    },
    'input.is-error': {
      color: '#ff1600',
    },
  } as CardClassSelectors;

```

via

```auto
    card.value = await payments.value.card({
      style: darkModeCardStyle,
    });

```

This is what it yields:

```auto
<style id="sq-single-card-styles">
      input { color: #FFFFFF; font-family: Helvetica; }
      
      form .sq-background-text { font-family: Helvetica; }
      
      label { font-family: Helvetica; color: #999999; }
      
      input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { -webkit-box-shadow: 0 0 0 100px #2D2D2D inset !important; -webkit-text-fill-color: #FFFFFF !important; }
      
      input.sq-error { color: #ff1600; }
      
      form input::placeholder { color: #999999; }
      
      form .sq-background-text .sq-visible-background-text { color: #999999; }
      
      form #card-number-wrapper { border-color: #2D2D2D; }
      </style>

```

The above conforms to the docs as well as what is spelled out in the `CardClassSelectors` interface.

Please help ☹

---

<div class="post-metadata">

**Author:** ![Bryan-Square](https://sea1.discourse-cdn.com/square/forums/user_avatar/developer.squareup.com/bryan-square/32/38_2.png) [@Bryan-Square](https://developer.squareup.com/forums/u/Bryan-Square)\
**Post date:** [January 21, 2025, 8:34pm UTC](https://developer.squareup.com/forums/t/customizing-colors-on-square-js-card-form-documention-incorrect/9280/12 "2025-01-21T20:34:33Z")

</div>

Are you attaching the card container before or after the background is set? 🙂

---

<div class="post-metadata">

**Author:** ![shanek](https://avatars.discourse-cdn.com/v4/letter/s/f1d935/32.png) [@shanek](https://developer.squareup.com/forums/u/shanek)\
**Post date:** [June 10, 2026, 5:55am UTC](https://developer.squareup.com/forums/t/customizing-colors-on-square-js-card-form-documention-incorrect/9280/13 "2026-06-10T05:55:48Z")

</div>

This was the only thing that fixed the background color for me:

```auto
.sq-card-iframe-container {
  color-scheme: auto;
}

```

And now any bg color I set like this:

```auto
await payments.card({
  style: {
    input: {
      backgroundColor: '#18181b',
...

```

Magically comes through when it was always white before.

It’s worth noting this seems to be needed during initialization, because after trying to change the `color-scheme` in browser dev tools after loading doesn’t cause a regression and I’ve only tested this in a Chromium based browser.