ios safari header color

How to stop Safari from matching your iPhone’s status bar to the website’s header color

Safari website tinting in iOS 15 and iPadOS 15 is one of those design decisions that many people wish Apple never made. This is an optional feature, but Apple left it turned on by default. Follow these steps if you’d like to stop Safari from tinting the iPhone’s status bar with the current website’s header color.

What is website tinting anyway?

Website tinting is a new Safari design feature Apple introduced with iOS 15 and iPadOS 15.

With it turned on, the status bar of your iPhone or iPad will be tinted temporarily to match the dominant color in the header of the website you’re currently viewing. This blurs the boundary between Safari’s chrome and the system status bar, which is a dedicated area at the top of the display where iOS shows you things such as the current time and signal strength.

→ How to use Safari tab groups on your Apple devices

People who dislike this feature argue that a website has no business spilling its colors into iOS’ status bar—doing so can be distracting, especially when flipping between open tabs.

When you upgrade to or perform a clean install of iOS 15, website tinting is turned on in Safari by default. Thankfully, Apple provides a quick switch to toggle website tinting at will.

How to turn off Safari website tinting

To stop Safari from matching the color of the system status bar at the top of the display to the current website’s header color, simply toggle a dedicated switch in the Safari settings.

• Open the Settings app on your iPhone or iPad
• Choose “Safari” from the root list.
• Slide the switch next to “Allow Website Tinting” to the OFF position to disable the feature.

This toggle is on by default and only shows up on iOS 15 and iPadOS 15 or later.

And that’s all you need to do to reverse this particular design change in Safari.

With website tinting turned off, switching tabs in Safari or scrolling will no longer affect the color of the iOS status bar—which is exactly the way it was on iOS 14 and iPadOS 14. To re-enable website tinting, simply set the aforementioned switch to the ON position.

The controversial Safari design in iOS 15

To say Apple has upset its loyal fans with the controversial design changes in Safari would be an understatement. When the iOS 15 beta dropped in June 2021, people immediately took to Twitter to complain about Safari and website tinting was the least of their worries.

Relocating the URL bar from the top to the bottom, plus combining the tab bar and the address bar into single unified controls, didn’t sit well with many users. But this time around, however, Apple actually listened to feedback from beta testers and early adopters.

With the sixth beta of the operating system, Apple actually walked back many of the changes in iOS 15 Safari while adding some new controls to choose whether you prefer an iOS 14-like design for Safari or the new design with the URL bar at the bottom by default.

Safari 15 Theme Color

Safari 15 adds a theme color for the tab bar. Safari can automatically pick a color based on the content or you can manually set the color with a meta tag.

Safari 15 Tab Bar Color

The Safari team at Apple have long been following a design trend of reducing the emphasis on the browser chrome to “defer to the content” . In Safari 15 that includes a more compact browser tab layout and having the tab bar take its color from the content.

By default, Safari attempts to set the color of the tab bar based on the page background or color of any header. For my site this seems to work on the iPhone and the iPad giving me a blue tinted tab and status bar that matches the page header.

On the desktop I see the unchanged white tab bar unless I manually set the theme color.

Setting The Theme Color

You can manually set the tab bar color if you don’t like the choice Safari is making. Add a meta tag in the HTML head with the name “theme-color” and the color you want to use in the content:

If you want a different color for light and dark color schemes use media queries:

Safari ignores colors that would hide the red, yellow and green window control buttons:

How Do I Turn It Off?

If you don’t like the tab bar tinting you can turn it off in the Safari preferences. On the desktop and the iPad it’s called “Show color in tab bar”:

On the iPhone, it’s called “Allow Website Tinting”:

I’m undecided if I like the effect. So far I’ve disabled it on the desktop but left it enabled on the iPad and iPhone.

• Design for Safari 15

Never Miss A Post

Sign up to get my iOS posts and news direct to your inbox and I'll also send you a PDF of my WWDC 2023 Viewing Guide

Unsubscribe at any time. See privacy policy .

How to change the iOS navigation's bar background-color

To make a website fullscreen on iOS, add the following to index.html header:

You can change the bar's color behind the URL by setting the theme color (no need to modify the CSS). For example, let's change the background to black:

Or to navy:

If you remove the theme-color meta tag, iOS will decide the background color (generally it'll use the same color as the one in the body).

Hi, I'm Erik, an engineer from Barcelona. If you like the post or have any comments, say hi .

More articles

Safari 15: New UI, Theme Colors, and… a CSS-Tricks Cameo!

There’s a 33-minute video (and resources) over on apple.com covering the upcoming Safari changes we saw in the WWDC keynote this year in much more detail. Look who’s got a little cameo in there:

Perhaps the most noticeable thing there in Safari 15 on iOS is URL bar at the bottom ! Dave was speculating in our little Discord watch party that this probably fixes the weird issues with 100vh stuff on iOS. But I really just don’t know, we’ll have to see when it comes out and we can play with it. I’d guess the expectation is that, in order for us to do our own fixed-bottom-UI stuff, we’d be doing:

On desktop, the most noticeable visual feature is probably the theme-color meta tags.

This isn’t even a brand new Apple-only thing. This is the same <meta> tag that Chrome’s Android app has used since 2014 , so you might already be sporting it on your own site. The addition is that it supports media queries.

It’s great to see Safari get aspect-ratio and the new fancy color systems like lab() and lch() as well. Top-level await in JavaScript is great as it makes patterns like conditional imports easier.

I don’t think all this would satisfy Alex . We didn’t exactly get alternative browser engines on iOS or significant PWA enhancements (both of which would be really great to see). But I applaud it all—it’s good stuff. While I do think Google generally takes privacy more seriously than what general internet chatter would have to believe, it’s notable to compare each company’s newly-released features. If you’ll forgive a bit of cherry-picking, Google is working on FLoC , a technology very specifically designed to help targeted advertising. Apple is working on Private Relay , a technology very specifically to making web browsing untrackable.

I’ve been using the iOS 15 beta for a few days, and I’ve liked how Safari handles the viewport height for the most part. While the URL bar is in its normal state, the viewport extends to the bottom of the screen (and going past the safe area on devices with a notch). The viewport shrinks down to right above the URL bar when it becomes hidden.

This video might explain it better than I can.

Last Christmas, my wife got me a new Android phone with 6” display. On it, Android 11 featured Chrome serach bar at the bottom. Firefox for Android also has search bar at the bottom by default (although this can be changed).

I suspect it has something to do with larger screen sizes and top part of the screen not being as acessible on handheld devices (espacially when using single-hand).

If I were to do design prediction, I would say we should see even more movement from headers toward rich footers in the future.

Yeh, I feel another pattern Apple are using is the card from the bottom, which improves the thumb reach area.

The URL bar at the bottom really bugs me. It seems that Apple believes that Safari is the primary app in itself, not a gateway to other experiences on the web.

I see no reason to have the most accessible part of the screen reserved for interacting with the URL bar instead of it being available to websites, to make them easier to use.

Though the notch on their latest models already killed more than 44 CSS pixels of the bottom for interactive use, the new URL bar now demands twice that and does it always, not just until the user has scrolled down the page.

Am I the only one who thinks this actually makes the 100vh issues way more complicated? Ugh.

This is a big change too:

https://twitter.com/kevgski/status/1403754664160632835?s=12

This url bar on mobile is absolutely bad. What this means? You have to fix all old project for one browser! Stupid

There are quite a few bugs. For example, interfaces where you have fixed cards or absolute cards will cause the env() of the tab bar to inexplicably double. -> https://codepen.io/paul3fa/pen/gOmBxxY try this on your phone in debug mode, ios15

Has there been more research on how to handle the new address bar?

I just had to fix this in one of my current project. It seems that using bottom: env(safe-area-inset-bottom) worked out of the box for me, without the need for calc .

How do I get it to apply on Bottom address bar on Safari 15?

It should be default! But if not, 9to5Mac breaks down the steps which you can do with the Safari app open:

• In the address/search bar, tap the “aA” icon on the left (when on a website)
• Tap “Show Bottom Tab Bar”

Alternatively, you can also change the iOS 15 address/search bar by heading to the Settings app > Safari > swipe down and choose “Tab Bar.”

Hope this helps!

how can i disable the divider/border between the adressebar and the website? The divider/border appears only on iOS Safari. A few websites e.g. t3n.de does`t have it.

Best, Florian

Safari 15 still has issues with 3d transform e.g: transform: rotate3d(1, 0, 0, -60deg); Or -webkit-transform: rotate3d(1, 0, 0, -60deg)

it just not renders while any other browser can.

Also still issues with html5 video tags. Somehow IOS restrictions are applied for desktop too :”HTTP servers hosting media files for iOS must support byte-range requests”

Safari is becoming the IE of browsers …

How to Stop Your iPhone Status Bar from Matching the Website Color in Safari

Safari Website Tinting colors the system status bar at the top of your device to match the header color of the website you're currently viewing. Some really appreciate this feature as it creates a less distracting view, however, others feel the gray system status bar makes it easier to see the iPhone status bar icons. If you fall in this camp, we'll show you how to disable Website Tinting.

Related:  How to Hide Apps on the iPhone & Find Them Later

What Is the Status Bar on iPhone?

The system status bar on your iPhone or iPad is the line of icons across the top of your screen displaying the time, signal strength, and your device's battery life.

How to Change Status Bar in Safari on iPhone

Follow the steps below to learn how to customize the status bar on iPhone. 

That's all there is to it! Now your system status bar will always have the gray background while browsing in Safari. 

Author Details

Ashleigh Page

Article Spotlight

New body scan connected health station by withings.

Are you ready to revolutionize the way you approach your health and well-being? Look no further than the Withings Body Scan Connected Health Station – a cutting-edge device designed to empower you on your health journey. Let's dive into the features that make this health station a game-changer for your lifestyle.

Featured Products

We are hosting a free live class Wednesday, April 17, 4:30 p.m. E.T. The Notes app may seem simple, but it's actually jam-packed with valuable features that can make your life easier. Space is limited, sign up now.

Are you looking for an iPad case that checks all the boxes? Look no further! Zugu creates convenient cases that are protective and slim…and their wide range of colors is simply unmatched. With a magnetic stand featuring up to ten viewing angles, your iPad will always be ready for work, play, and even travel. In the rare case of any iPad damage, Zugu will cover AppleCare+ repair costs. They also offer free 60-day returns plus a 2-year warranty. If that isn’t enough, Zugu also donates 10% of profits to a charitable cause that helps kids around the world. Take your iPad to the next level while making a meaningful difference.

Most Popular

How to Tell If Someone Blocked Your Number on iPhone

10 Simple Tips To Fix iPhone Battery Drain

How to Tell If a Dead iPhone Is Charging

How To Put Two Pictures Together on iPhone

How to Schedule a Text Message on iPhone

How to Hide an App on Your iPhone

Why Is Find My iPhone Not Working? Here’s the Real Fix

How To Turn Off Flashlight on iPhone (Without Swiping Up!)

How to Right-Click on iPad

Step Counter: How To Show Steps on Apple Watch Face

Convert a Picture to a PDF on iPhone, Even Without Apps

How to Use Emoji Search on iPhone & iPad

Featured articles, why is my iphone battery draining so fast 13 easy fixes.

Identify Mystery Numbers: How to Find No Caller ID on iPhone

Apple ID Not Active? Here’s the Fix!

How to Cast Apple TV to Chromecast for Easy Viewing

Fix Photos Not Uploading to iCloud Once & for All (iOS 17)

There Was an Error Connecting to the Apple ID Server: Fixed

CarPlay Not Working? 4 Ways to Fix Apple CarPlay Today

Check out our sponsors.

• Each email reveals new things you can do with your phone (and other devices) with easy-to-follow screenshots.
• Enter your email to get your first tip immediately!

Want to highlight a helpful answer? Upvote!

Did someone help you, or did an answer or User Tip resolve your issue? Upvote by selecting the upvote arrow. Your feedback helps others!  Learn more about when to upvote >

Looks like no one’s replied in a while. To start the conversation again, simply ask a new question.

Safari menu bar and header changes color depending on website - also reopen last closed window no longer works - I have tried clearing cache - did not fix -

Also reopen last closed window does not always work

Anyone else having this issue and know how to fix?

MacBook Pro 15″, macOS 11.6

Posted on Sep 26, 2021 12:47 PM

Similar questions

• Why does the Safari Menu Bar change colors for different web sites? I must have missed something in the update notes. Do the colors mean something? Using Big Sur 11.6 but I think this has been going in since Monterey, maybe before that. 1 1003 2
• Change Color of Safari Toolbar After Big Sur update yesterday (10/3/21) toolbars of safari and some othe apps are dark and hard to read. I see no option to change either in Safari drop down preference menu or Apple preference menus. Help... 4134 2
• Slow Safari and no title on the tabs after upgrade with macOS Big Sur Hello, I have experience a very slow browsing with Safari after updating to macOS Big Sur. There is no title on the tabs and crashing all the time. Anyone else with such issues? 274 1

Loading page content

Page content loaded

Sep 27, 2021 4:41 AM in response to GROGLIO

I have similar problems with ver 15 on my MacBook Pro running OS 11.6. My menu bar changes color. At first, it was only black and I thought it was a private widow. Very confusing and hard to read. I deleted cookies, cleared history, and still have the same issue.

Even more, serious is how ver 15 freezes and I have to either close Safari and start over or attempt to reload the page.

Sep 26, 2021 11:41 PM in response to GROGLIO

Uncheck Show color in tab bar in Safari's Preferences -> Tabs .

Sep 27, 2021 6:04 PM in response to Marco Klobas

Thanks so much - back to normal -

Now if only Reopen last closed window would work

How to modify headers with Safari on iOS

Is there a solution to modify headers on safari for iOS just like with ModHeader extension for other browsers ?

Thanks for your answer

• Safari Developer Tools

You can use the Requestly Desktop app - https://requestly.io for Intercepting network requests from the Safari browser and modifying HTTP request & response headers. Requestly allows you to launch any browser directly from the app and modify its traffic. Not only headers, but you can also modify the response body, request URL, request Body, etc. Check out more at https://requestly.io

I want to use Safari for my GraphiQL page testing but with the added security of an API key, I have no way to edit headers to allow access to the GraphiQL interface. Firefox and Chrome both have extensions to edit headers, and the rails-graphiql gem is testing the implementation of editing headers directly in the GUI. But until that update get's pushed, there's no solution I suppose.

Is there a solution to modify headers on safari for iOS just like with ModHeader extension for other browsers

You can use the Requestly desktop app[1] to intercept and debug network traffic on safari and iOS.

To add headers you can use the modify headers rule[2]

For iOS, they have thorough documentation[3] on how to setup the proxy and the ssl certificates. This is a one time setup and helps you not just intercept and inspect the traffic (even https) but also to make easy modifications using many common rules like the redirect rule, headers rule, modify response rule, etc.

I have the same issue all the time, when in the office at least i could share my laptops network connection (and thus routing for testing restricted apps) but now I’m dead in the water

Your laptop will still need to be on the same network to debug iOS traffic

I want to use Safari for my GraphiQL page testing but with the added security of an API key, I have no way to edit headers to allow access to the GraphiQL interface.

They also provide support for specifically targeting GraphQL requests inside the modify. request[4] and modify response rule.

Links: [1] Desktop app - https://requestly.io/desktop [2] Modify headers - https://docs.requestly.io/getting-started/modify-http-request-using-rules/modify-headers [3] iOS setup - https://docs.requestly.io/desktop-app/how-to.../ios-interception [4] Modify GraphQL requests - https://docs.requestly.io/getting-started/modify-http-request-using-rules/modify-ajax-response-rule/mock-graphql-api-response

If you connect your iPhone to your Mac with a Lightning to USB-C cable, under the "Develop" nav option (which you have to enable in Safari's preferences | "Safari Settings > Advance > Show Develop Menu in menu bar").

Under Develop, find your phone and then click the site you want to override request or responses for.

Then you will have access to the Safari Developer Tools for that mobile webpage. Go to "Network", find the request you want to edit. Right click and pick if you want to override the request or response. Then edit the file there.

I believe you could edit the HTML, request headers, ect... this way.

https://www.youtube.com/watch?v=ei1sNP2zAhA

• a. Send us an email
• b. Anonymous form
• Buyer's Guide
• Upcoming Products
• Tips / Contact Us
• Podcast Instagram Facebook Twitter Mastodon YouTube Notifications RSS Newsletter

How to Turn Off Tab Bar Coloring / Tinting in Safari

In iOS 15 as well as Safari 15 for macOS Big Sur and macOS Catalina, Apple introduced some Safari interface design changes that haven't been universally welcomed. Fortunately, Apple has made some of these changes optional, such as the ability to disable tab bar coloring.

The idea behind tinting is that it allows the browser interface to fade into the background and create a more immersive experience. However, the effect doesn't always look great, especially if you have several windows arranged on your desktop. Happily, Apple chose to include an option to turn it off.

• Select the Tabs panel.

If you're using Safari in iOS 15, you can find the same option in Settings -> Safari . Under the "Tabs" section, turn off the switch next to Allow Website Tinting . On iPadOS 15, this option is called Show Color in Tab Bar , just like in Safari 15 for macOS.

Get weekly top MacRumors stories in your inbox.

Top Rated Comments

Popular Stories

When to Expect a New Apple TV to Launch

Alleged iPhone 16 Battery Details Show Smaller Capacity for One Model

iPhone 16 Plus Rumored to Come in These 7 Colors

Apple Event for New iPads Still Considered 'Unlikely' Following Delays

Macs to Get AI-Focused M4 Chips Starting in Late 2024

iOS 18 May Feature All-New 'Safari Browsing Assistant'

Next article.

Our comprehensive guide highlighting every major new addition in iOS 17, plus how-tos that walk you through using the new features.

App Store changes for the EU, new emoji, Podcasts transcripts, and more.

Get the most out your iPhone 15 with our complete guide to all the new features.

A deep dive into new features in macOS Sonoma, big and small.

Revamped models with OLED displays, M3 chip, and redesigned Magic Keyboard accessory.

Updated 10.9-inch model and new 12.9-inch model, M2 chip expected.

Apple's annual Worldwide Developers Conference will kick off with a keynote on June 10.

Expected to see new AI-focused features and more. Preview coming at WWDC in June with public release in September.

Other Stories

11 hours ago by MacRumors Staff

18 hours ago by Tim Hardwick

20 hours ago by Tim Hardwick

2 days ago by Tim Hardwick

How to stop Safari from changing colors in iOS 15, iPadOS 15 and macOS 12

Safari wants to change colors like a chameleon — you can stop it

Safari in Apple iOS 15 , iPadOS 15 and macOS 12 feels like a whole new browser in a lot of ways. And while I like Tab Groups, there's one feature that I immediately didn't really enjoy and wanted to disable. And fortunately, that's very easy to do.

This new feature changes the color of the interface around the tabs, bookmark and navigation button areas in Safari, to match the color of the website you're using. Sometimes this change doesn't bother me, such as when Safari goes black while I'm reading a CNN article, but when it takes on a color like blue (seen above for CNBC, or on TweetDeck), it's a bit jarring to my eye. 

• iOS 15 hidden features  and how they make your iPhone better
• macOS 12 Monterey compatibility : See if your Mac can run it
• Plus: Check out our hands-on macOS 12 Monterey review

The intent is clearly to immerse the reader in the site's aesthetic, but I'd rather that site pop off the neutral shade like it did in past versions. That might sound awesome to you. But if it doesn't, read on. And don't be ashamed. It's normal to not like change. I just wish some other Safari changes were equally configurable, as it doesn't make sense that the Reload button is now hidden in iPadOS.

And so I figured out how to change this setting in all three of the operating systems. Fortunately, it's the exact same in iOS 15 and iPadOS 15, and macOS 15 is only slightly different. 

How to stop Safari from changing colors in macOS 12

1. Click Safari in the Menu bar. Of course, you'll need to have Safari open for this.

2. Click Preferences.

3. Click Advanced.

Sign up to get the BEST of Tom’s Guide direct to your inbox.

Upgrade your life with a daily dose of the biggest tech news, lifestyle hacks and our curated analysis. Be the first to know about cutting-edge gadgets and the hottest deals.

4. Uncheck "Show color in tab bar."

How to stop Safari from changing colors in iOS 15

According to my colleague Philip Michaels, who wrote our hands-on iOS 15 beta review, Safari's color-changing nature isn't a big a deal on the iPhone. Specifically, he told me "to be very honest, I do not notice it at all," as he's too busy being confused by the Safari iOS tab bar moving to the bottom of the screen .

That might be because iOS gives the tab bar much less space than macOS and iPadOS do. That said, here's how to disable it outright.

1. Open Settings and tap Safari.

2. Turn "Show Color in Tab Bar" off.

How to stop Safari from changing colors in iPadOS 15

Here, the difference is a little more pronounced, as you'll notice in the above TweetDeck screenshot. That big blue section is what temporarily appears when you pull a web page down to reload it. 

1. Open Settings.

2. Tap Safari.

3. Turn "Show Color in Tab Bar" off.

There, now you know how to stop Safari for changing its color to match websites, on every new Apple OS.

• Read next: Check out our hands-on iOS 15 beta review
• How to use Live Text in iOS 15

Henry is a managing editor at Tom’s Guide covering streaming media, laptops and all things Apple, reviewing devices and services for the past seven years. Prior to joining Tom's Guide, he reviewed software and hardware for TechRadar Pro, and interviewed artists for Patek Philippe International Magazine. He's also covered the wild world of professional wrestling for Cageside Seats, interviewing athletes and other industry veterans.

iPhone 16 Pro Max rumored to feature an upgraded camera — and extra-long battery life

iPhone 16 Pro Max — 7 biggest rumored upgrades

Google Imagen can now create ‘live photos’ — here’s what that means

Most Popular

By Cynthia Lawrence April 06, 2024

By Christoph Schwaiger April 06, 2024

By Tom Pritchard April 05, 2024

By Cynthia Lawrence April 04, 2024

By Cynthia Lawrence April 03, 2024

By Hunter Fenollol April 02, 2024

By Madeleine Streets April 02, 2024

By Grace Dean April 02, 2024

By Grace Dean April 01, 2024

By Madeleine Streets April 01, 2024

By Jo Plumridge March 30, 2024

• 2 Google is offering up to $450 for your iPad towards a Pixel Tablet
• 3 Massive markdowns on Amazon Essentials — 7 deals starting at $3
• 4 Amazon's entire Fire TV lineup is on sale — 9 deals I recommend from $19
• 5 Kevin Costner says he’d ‘love’ to return to ‘Yellowstone’
• 2 Massive markdowns on Amazon Essentials — 7 deals starting at $3
• 3 Amazon's entire Fire TV lineup is on sale — 9 deals I recommend from $19
• 4 Kevin Costner says he’d ‘love’ to return to ‘Yellowstone’
• 5 Goodbye low-quality images — new Meta Messenger update lets you send higher-quality photos