<View/> incorrectly applies background="base"

Extensions
,
1

Hi all, @Lianne suggested I create a new thread for this.

It seems like background="base" on <View/> components doesn’t reflect the color set in the “Fields and Cards” checkout setting.

For example, if you go to the default Order Status page, “Fields and Cards” is set to white and “Background 2” is set to #F2F2F2. And indeed each of the default sections has a white background. But if I put a <View background="base"/> it renders with #F2F2F2 as the background color instead of white.

Looking into it a bit, it seems like the background-color css property is correctly being set to --x-default-color-background, but in custom UI extensions it resolves to the first value (see below), which is the grayish background color.
image

Whereas in the default sections, it correctly renders as white, since the first value is undefined.
image

I realize I can use the <Card/> component for the order status page to get around this, but since it doesn’t exist on the Thank You page, is there no way to make my extension match the rest of the theme?

TLDR; On thank you page UI extensions, how can i get the <View/> to inherit the color set by the “Fields and Cards” settings (white)?

1 Like
2

Hey @aaron_barbieri Thanks for reaching out.

I believe you may be looking for the white background equivalent to what the <Card/> component provides? If so, at the moment, that’s not currently possible on the Thank You page prior to API version 2025-10. At the moment, the <View background="base"/> component doesn’t link to the “Fields and Cards” setting from the checkout editor. However, if you upgrade to the 2025-10 API version, you should be able to use the new <Section/> component, which is the replacement for <Card/> and this does work consistently across both checkout and customer accounts surfaces.

This should give you the white background styling you’re looking for on the Thank You page to match the rest of your theme. Let me know if I can clarify anything more on our end here, just ping me here, happy to help out further!