Button colours being overwritten on front-end (2024 theme)

Hi there,

I’m experiencing a strange issue in the Twenty Twenty-Four theme where any button that uses a non-default colour is being overwritten with the theme’s default “Primary” button colour on the front-end — but only on desktop. Mobile displays the correct colours.

Summary of the issue

• In the WordPress editor, all my button colours display correctly.
• On the front-end (desktop), all custom-coloured buttons get overwritten and turn orange, which is the theme’s default button background colour.
• Buttons using colours from the default theme palette are NOT affected.
• Buttons using a manual/custom colour value (e.g. #7A2CD5, #2F134E, etc.) are always overridden to orange on page load.

Key detail (important)

To diagnose the issue further, I created several brand-new test pages. This confirmed the issue is NOT limited to “older” pages:

• If I use a colour from the theme’s built-in palette → the button colour is preserved correctly on the front-end.
• If I choose a custom colour (not from the palette) → the front-end forcibly replaces it with the default theme button colour (orange) when the page finishes loading.

This behaviour happens consistently and is reproducible on multiple websites I manage that all use the Twenty Twenty-Four theme.

Other important info

• I don’t think custom CSS or JS is causing this issue.
• Disabling plugins and disabling custom code snippets does not fix the issue.
• The colour override only happens on desktop (mobile is unaffected).
• I inspected the styles and it appears the override is coming from global styles / theme.json output, which seems to be overwriting any button that does not use a palette-registered colour.

How to reproduce

1. Add a Button block.
2. Set a custom background colour (not from the palette).
3. View the page on desktop — the button colour is forcibly replaced by the theme’s default button colour.
4. View on mobile — the custom colour displays correctly.

Why I believe this is a theme bug

Since:

• Only non-palette colours are affected
• Only on desktop
• Across multiple unrelated sites
• And only when the Twenty Twenty-Four theme is active

…it appears that the theme’s global styles (possibly JS hydration or inline CSS generation) are unintentionally overriding any button colour that is not registered in theme.json.

Could you please confirm whether this is a known issue, and if so, whether a fix or patch is planned?

Thanks very much!