How change Safari's system background (theme-color)?

[xapp]

Safari uses "theme-color" to tint its navigation bar at the top.

<meta name="theme-color" content="#bb1919">

BBC News uses red color, so the whole browser is red (https://www.bbc.com/news😞 

 

Problem is, if you drag page away from right side or bottom, there is also red color under it. 

1. Is there a way to set "system" (under page) background, besides "theme-color"? Let's say, I want for navigation bar to be red, but background from right to be white.

2. If going into weird hacking and using negative margins on html/body to stretch content beyond bounds, is there a stable way to compensate scrolling bounds without breaking the whole layout? 

Edited October 2, 2021 by xapp
spelling

[niche]

Good question for the Safari Forum

[Ingolme]

Unfortunately, I have not done a lot of work with Safari so I probably can't give a definitive answer. From the look of it, I would guess that Safari replaces transparent backgrounds with the theme color, which means that you possibly can override that by setting the background color of the page with the html,body selector:

html, body {
  background-color: #FFF;
}

If you only want a specific element with a different color, you can set the background color of that element instead of the whole page.

 

12 minutes ago, niche said:

Good question for the Safari Forum

Please, there is no need to dismiss the question like this. Replies like this can drive people away from the forums and give people the impression that this is a bad place to ask questions. If you don't know the answer it doesn't mean that the question cannot be answered here, there may other developers who have experience with Safari on the forums who can answer the question.