Jump to content

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


Recommended Posts

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😞Safari.png.6f73bd1b12947a0d2a9c1ff57cef1832.png 


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 by xapp
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Create New...