safari tab bar color css

Amit Merchant Verified ($10/year for the domain)

A blog on PHP, JavaScript, and more

Get your website ready for new tab bar theming of Safari 15

June 13, 2021 · Safari

It’s a wrap for Apple’s WWDC 2021 last week. And while a lot of good stuff was released in the event, I, as a web developer, was pretty excited for Safari 15 and its all-new design in the macOS and the iPadOS.

The theme-color meta tag

Tab bar theming based on device theme.

The part of this all-new design is the adaptive theming of the tab bar. So, if your website’s background is pink , the tab bar color will also be pink . This makes the website blend in really nicely with the entire browser window. That’s pretty nice in my opinion and adds aesthetics to the overall web browsing experience.

While Safari 15 can change the tab bar color intelligently, you, as a website owner, can also change this behavior as per your need by adding just a single line in your HTML.

So, the way how this works is, you need to add the theme-color meta tag in your HTML and set your desired color in it. This will tell Safari to set this color for the website when it’s opened in a tab.

For instance, as you can tell, my blog has got a purple-ish accent to it. It only makes sense to have a tab bar color that falls into the same color region. So, we can add the following meta tag to the HTML with the color #673AAC like so.

This is all you need to make Safari 15 aware of the color in which the tab bar needs to be rendered when it’s opened in a tab.

Here’s how a website (not my blog) with a theme-color meta tag would look like when it’s opened in Safari 15.

Here’s one more example.

Additionally, you can also set different tab colors based on the device theme, whether it’s a dark or light theme by specifying the media attribute in the meta tag like so.

As you can tell, the media attribute takes prefers-color-scheme into the consideration and will set the tab bar color accordingly.

This is how the end result would look like.

» Share: Twitter , Facebook , Hacker News

Like this article? Consider leaving a

👋 Hi there! I'm Amit . I write articles about all things web development. You can become a sponsor on my blog to help me continue my writing journey and get your brand in front of thousands of eyes.

More on similar topics

Dock installable web apps in Safari macOS Sonoma

Designing websites keeping floating tab bar of Safari 15 (on iOS) in mind

Awesome Sponsors

Download my eBook

Recommendation(s)

Get the latest articles delivered right to your inbox!

No spam guaranteed.

Follow me everywhere

More in "Safari"

Recently published.

Talk to websites and PDFs with this free Chrome Extension NEW

RunJS — A JavaScript Playground on your desktop

The fluent data helper in Laravel

Spicing up text with text-emphasis in CSS

Comparing a value against multiple columns the easy way in Laravel

Top Categories

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 …

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 .

Styling the Tab Bar in Safari 15

24th June 2021

Safari 15 has brought with it a redesign of the tab bar. In macOS and iPadOS the tab bar and URL bar are all on the same line in a much more condensed design; in iOS the tab bar has moved to the bottom of the screen allowing users to switch between tabs with a swipe of their thumb.

The new tab bar will change colour depending on your design. Safari will try to match the background colour or the header colour of your site.

To choose the colour yourself, you can add a meta tag to the <head> of your site.

Safari allows you to choose different colours depending on a media attribute so you can have different a colour for users with dark mode enabled.

• Whilst in dark mode, if you provide a colour that is too bright Safari will darken the colour.
• Safari will not allow you to use colours that could cause accessibility issues with the Safari UI i.e. the same red as the close app icon.

iOS tab bar

The new tab bar in iOS is at the bottom of the screen hovering over the webpage and is likely to cover the UI of many web pages with static navigation. Developers can work around this by using env() in CSS.

env() is a way for the browser to provide you with values related to the current environment.

You'll need to tell the browser to use all available space with a viewport meta tag.

Then you can use safe-area-inset-bottom to push your UI above the tab bar.

There are four different safe-area-inset-x values and env() provides a second parameter for a fallback if the environment variable is not set.

Further Reading

• Design for Safari 15 - Apple
• theme-color - MDN
• theme-color - HTML Living Standard
• env() - MDN
• CSS Environment Variables Module Level 1

New WebKit Features in Safari 15

Oct 26, 2021

by Jen Simmons

With the release of Safari 15 for macOS Monterey, iPadOS 15, iOS 15, and watchOS, as well as macOS Big Sur and macOS Catalina, WebKit brings significant advancements in privacy and security, improved interoperability, and a host of new features for web developers. Take a look.

Web Extensions

This release brings Safari Web Extensions to iOS and iPadOS. Web Extensions use HTML, CSS, and JavaScript to offer powerful browser customizations. Now developers can create them for every device that supports Safari, using APIs, functionality, and permissions that are increasingly standardized across all browsers. Learn how to build Safari Web Extensions and discover how to convert an existing extension by watching Meet Safari Web Extensions on iOS at WWDC21.

This year’s release also adds support for the Declarative Net Request WebExtensions API to block content on the web. Learn all about the latest WebExtension APIs by watching Explore Safari Web Extension Improvements at WWDC21.

WebKit now provides support for theme-color in HTML meta tags, and in Web Manifest. By specifying a theme-color, web developers can change the color of the status bar and overscroll area in Safari on iOS 15. Theme-color also changes the Tab Bar and overscroll area background colors in Compact Tab layout for Safari 15 on macOS Monterey and Big Sur and iPadOS 15.

In the HTML meta tag, developers can specify separate colors for Dark Mode and light appearance with the media attribute.

Watch “Design for Safari 15” at WWDC21 to learn more about the Compact Tab bar and how to use theme-color.

WebKit now supports CSS aspect-ratio . This property can be used to set a preferred aspect ratio on any element, including boxes like divs , iframes for embedded video, or graphic design elements on a page.

WebKit provides support for the new lab() , lch() , hwb() color syntaxes from Color level 4 , providing web developers with ways to express a richer range of colors in Lab, Lch, and Hue-Whiteness-Blackness. WebKit also supports predefined color spaces using the color() function syntax: srgb , display-p3 , a98-rgb , prophoto-rgb , rec2020 , xyz .

WebKit supports 12 new values for list-style-type : disclosure-closed , disclosure-open , ethiopic-numeric , japanese-formal , japanese-informal , korean-hangul-formal , korean-hanja-formal , korean-hanja-informal , simp-chinese-formal , simp-chinese-informal , trad-chinese-formal , and trad-chinese-informal .

There’s also improved implementation of existing values for list-style-type : armenian , cjk-ideographic , hebrew , lower-armenian , lower-roman , upper-armenian , and upper-roman . See a demo of all of these options at MDN. We also updated WebKit’s implementation of list-style-position:inside to match the updated CSS specification , creating interoperability after a 22 year old debate .

Watch “Design for Safari 15” at WWDC21 to learn more about the latest updates to CSS.

Web Inspector

Web Inspector in Safari 15 includes a CSS Grid Inspector overlay for inspecting grid containers on your pages. Watch “Discover Web Inspector Improvements” at WWDC21 to learn more.

JavaScript and WebAssembly

This release of WebKit adds support for ES6 Modules in Workers and ServiceWorkers. ES6 Modules provides a powerful way for developers to organize large applications using purpose-specific libraries. Workers/Service Workers provides a way to offload work from the main thread, and are often used for complex applications. Now, developers can use them together — moving work off the main thread, improving performance, while retaining the organizational benefits of modules.

Additional new capabilities to the JavaScript engine, include:

• support for top-level await
• Error.cause
• private class methods and accessors
• BigInt64Array and BigUint64Array

Improvements to WebAssembly include streaming compilation, bulk memory operations, reference types, and non-trapping conversions from float to int .

You can learn more about the latest JavaScript and WebAssembly updates to WebKit and Safari 15 by watching “Develop Advanced Web Content” at WWDC21.

WebKit now supports WebGL2 ( demos ). In addition, the WebGL implementation now runs on top of Metal for better performance.

Web Share level 2 enhancements to Web Share enable sharing files from a web page to an app. See Web Share API for more information.

User gestures now propagate through requestAnimationFrame with a one-second time limit.

And now, with Safari 15.1, performance.timeOrigin is available in Web Workers.

You can learn more about the latest Web APIs in WebKit by watching “Develop Advanced Web Content” at WWDC21.

Safari 15 includes several media improvements for users and developers. For example, built-in media controls now have Playback Speed and Chapters menus. Plus, the language/subtitle tracks menu is now available on iOS and iPadOS.

There’s also new support for the Opus audio codec in WebM containers. And on on all iPads that support iPadOS 15, VP9 and WebM in Media Source Extensions (MSE) are now hardware-accelerated.

Safari 15 also adds support for the MediaSession API to enable SharePlay experiences. You can learn more about creating SharePlay experiences by watching “Coordinate media playback in Safari with Group Activities” at WWDC21.

Security and Privacy

Continuing our dedication to privacy and security, Safari on iOS 15 and macOS Monterey supports automatic HTTPS upgrades and hides your IP address from known trackers. Automatic HTTPS upgrades are also supported in Safari 15 on older macOS versions.

Earlier this year, Safari was the first browser to ship a proposed web standard for measuring advertising in a privacy-preserving way – Private Click Measurement , or PCM. Safari 15 provides three major updates to PCM:

• Attribution reports also sent to click destination.
• Click fraud prevention with unlinkable tokens.
• IP address protection for attribution reports.

To learn more, read PCM: Click Fraud Prevention and Attribution Sent to Advertiser or watch “Meet privacy-preserving ad attribution” at WWDC21.

Authentication and Passwords

WebKit now includes support for on-device verification codes in your app or website for a more secure sign-in experience with iCloud Keychain Password Manager. To use verification codes with Safari and Autofill:

• Use autocomplete=one-time-code to make an <input> eligible for AutoFill.
• Use a standard otpauth URL and replace the scheme with apple-otpauth to link directly to the password manager for setup.
• Use a raster image to enable contextual menus on otpauth QR codes that offer to set up a verification code generator.

Learn how to support the process in your apps and websites by watching “Secure login with iCloud Keychain verification codes” at WWDC21.

Despite their prevalence, passwords inherently come with challenges that make them poorly suited to securing someone’s online accounts. Passkeys are WebAuth credentials intended to replace passwords for websites and apps with device sync and backup. The technology is now available in WebKit as a preview. To enable in Safari, choose Develop > Enable Syncing Platform Authenticator. Learn more watching “Move beyond passwords” at WWDC21.

Apple Pay enhancements allow developers using the Payment Request API to indicate an estimated arrival date for shipping methods, support a coupon code, and mark the shipping method as in-store pickup.

Availability

These improvements are available to users running Safari on iPadOS 15, iOS 15, or Safari 15 on macOS Monterey, macOS Big Sur, or macOS Catalina. These features were also available to web developers in Safari Technology Preview releases. Changes in this release of Safari were included in the following Safari Technology Preview releases: 123 , 124 , 125 , 126 , 127 , 128 , 129 .

Download the latest Safari Technology Preview release to stay at the forefront of future web platform and Web Inspector features. You can also use the WebKit Feature Status page to watch for changes to web platform features you’re interested in.

If you run into any issues, we welcome your bug reports for Safari or WebKit bugs for web content issues. Send us a tweet @webkit to share your thoughts on this release.

Using Bottom Tab Bars on Safari iOS 15

Jun 17, 2021 (Updated Sep 23, 2021)

Apple recently announced the latest version of Safari on iOS 15 with a completely new design featuring a bottom floating tab bar. What does this mean for web developers and designers?

Safari on iOS has had a problem for a long time when it comes to building websites and web apps with bottom-aligned navigation due to the browser toolbar's dynamic height. As you scroll the toolbar disappears making any element that is fixed to the bottom of the screen look great, but as soon as you try to tap any link inside the browser toolbar appears again.

Sorry, your browser doesn't support embedded videos.

This makes for a really poor UX so designers and developers have mostly resorted to user "hamburger" menus instead. This is a shame as bottom tab bars increase discoverability by not hiding links behind a tap and are also easier to reach one-handed on todays large mobile devices.

Updates with Safari 15

Apple reverted some of these changes in the final iOS 15 release. The user can now choose between the old UI (top bar) or the new one. If they choose the new bottom bar UI it does not float as much greatly improving overlap issues. While you might not need safe areas anymore if you're lucky, I would still recommend to implement it as I've seen it cause issues anyways.

The new Safari 15 now has a tab bar floating at the bottom of the screen. At first it might seem like this makes it even harder to create tab bar navigations, and by browsing the web using iOS 15 it's easy to spot issues like this:

Fixing Tab Bar Overlap with Safe Areas

Thankfully solving this issue is very easy by using the env() CSS function together with safe-area-inset-bottom . This API was shipped with iOS 11 making it possible to customize how websites render when using devices with a notch. By inspecting pinterests code we can see that their tab bar has a fixed position anchored to the bottom, the relevant parts look something like this:

To respect the safe area and make sure that nothing from the browser UI overlaps let's add another bottom property with env(safe-area-inset-bottom) as a value. This function works like a CSS variable, returning the minimum amount of inset needed to keep your UI from overlapping with the browser's. We keep the old style rule as a fallback browsers that do not support it:

Now when scrolling nothing overlaps:

Be sure to use env() every time something is anchored to the bottom of the screen or overlap will likely appear. env() can also be combined with css calc() or min() and max() , so if your design needs more padding you can add it like this:

You can learn more about respecting the safe-area in this excellent article published on the webkit blog or Apple's WWDC session called Design for Safari 15 (Relevent part starts around 13 minutes in).

The best way to see if you got it right is to use a physical device with iOS 15, but if you don't have access to one you can download the Xcode 13 beta from Apples developer portal and use an iOS 15 simulator by going to Xcode > Open Developer Tool > Simulator

Tab Bar UX in iOS 15

Remember the issue in previous versions of Safari where you had to click twice when using bottom tab bars? Once for showing the safari toolbar and another tap for actually triggering your link? That is no longer an issue 🙌. Safari 15 now respects and follows links or buttons, which is a big improvement! Check out how much better Twitter's tabbar works when switching tabs on Safari 15:

Even if tab bars now technically work better than before we still have to consider the design and UX to create something that people understand and that looks good. The browser UI is now very bottom-heavy and placing more actions next to it might feel cluttered. What do you think? Let me know on twitter @samuelkraft .

I'm excited to see how everyone adapts to the new UI and if we will see a return of tab bars on the web or not.

Get an email when i write new posts. Learn animation techniques, CSS, design systems and more

Related posts

Dec 18, 2021

Dec 15, 2021

Sep 07, 2021

Manually set Safari 15 tab color-theme to my website

Hello. I was wondering if there is any way to manually set the Safari 15 tab color-theme color to my website. It seems like Safari automatically choose the color but I find out that this selection occurs during the first seconds of website load and, because of that, the color being choosen is not the right one for my website.

Is there any CSS I could add or a metatag that tells safari which color it should pick?

I know this is kinda a wierd request, but I want to provide my visitors the richest experience they could get.

• Safari and Web

After doing some research and testing, I figured out that web browsers on a Mac computer will not let you use colors that are too similar to the colors of the top-left buttons (red for closing, yellow for minimizing, and green for maximizing). White is also not allowed since it's the color of the text in the top bar.

I will now look for a list of acceptable colors.

Accepted Reply

You can set it manually with the meta tag:

You could even set different ones for light and dark theme if your website supports them:

If I'm not wrong, Safari chooses the theme color automatically from the background-color property.

Hope that helps 🙂

Thanks a lot Cjcorp!

Thank you! 🙏❤️

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.

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...

iMac 27″ 5K, macOS 11.2

Posted on Oct 4, 2021 1:48 PM

Posted on Oct 4, 2021 1:50 PM

Preferences>Tabs>Show Color in Tab Bar. Uncheck it.

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
• Safari -- how do I change the color scheme back? Upgraded to Big Sur 11.6 and it changed my Safari header to a black color scheme, which I hate. I can't find the process to change it back. Can someone help? Thanks, Gary 11550 4
• How can I change top menu bar color in Big Sur? The top menu bar is black and there's too much black in Big Sur. How do I change this? Doing Preference, General, Light does nothing. [Re-Titled by Moderator] 678 1

Loading page content

Page content loaded

Oct 4, 2021 1:50 PM in response to Allyka9

Oct 4, 2021 2:13 PM in response to IdrisSeabright

Same drill in iOS/iPadOS 15.0 Settings for Safari.

• 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

iOS 18 Will Add These New Features to Your iPhone

iPhone 16 Plus Rumored to Come in These 7 Colors

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

Top Stories: M4 Mac Roadmap Leaked, New iPads in Second Week of May, and More

Best Buy Opens Up Sitewide Sale With Record Low Prices on M3 MacBook Air, iPad, and Much More

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

2 days ago by MacRumors Staff

2 days ago by Joe Rossignol

2 days ago by Tim Hardwick

3 days ago by MacRumors Staff

3 days ago by Tim Hardwick

• for Firefox
• Dictionaries & Language Packs
• Other Browser Sites
• Add-ons for Android

Adaptive Tab Bar Color by Eason Wong

Changes the color of Firefox tab bar to match the website theme.

Extension Metadata

• Dark Reader
• Firefox under Version 112.0 (released on Apr, 2023)
• Chameleon Dynamic Theme
• Dark Mode Website Switcher
• automaticDark
• Midnight Lizard
• “about:devtools-toolbox” might not have the correct color scheme

Star rating saved

The developer of this extension asks that you help support its continued development by making a small contribution.

Contribute now

This add-on needs to:

• Read and modify browser settings
• Monitor extension usage and manage themes
• Access browser tabs
• Access your data for all websites
• Support site
• Support Email
• See all versions

Search code, repositories, users, issues, pull requests...

Provide feedback.

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly.

To see all available qualifiers, see our documentation .

• Notifications

Changes the colour of Firefox tab bar to match the website theme.

easonwong-de/Adaptive-Tab-Bar-Colour

Folders and files, repository files navigation.

Adaptive Tab Bar Colour

What Does The Add-on Do

Every time you open, close, or switch tabs, this add-on changes the theme of your Firefox browser to match the theme colour of the website you are viewing – just like how macOS Safari tints its tab bar.

Works Well With

This add-on is programmed particularly to be responsive to some prominent web page styling add-ons.

• Dark Reader

Incompatible With

This add-on takes control of browser’s UI colour and colour scheme settings. Any add-on that makes changes to them is incompatible.

• Firefox under Version 112.0 (released on April, 2023)
• Chameleon Dynamic Theme
• Dark Mode Website Switcher
• automaticDark
• Midnight Lizard

For CSS Theme Enjoyers

A CSS theme can work with ATBC , when system colour variables are being used. This is an example of an ATBC -compatible CSS theme.

Safety Warning

Beware of malicious web UI: Please distinguish between the browser’s UI and the web UI, see The Line of Death . (Credit to u/KazaHesto )

Known Issue(s)

• “about:devtools-toolbox” might not have the correct colour scheme

Releases 55

Sponsor this project.

• https://www.paypal.com/donate/?hosted_button_id=T5GL8WC7SVLLC
• https://www.buymeacoffee.com/easonwong

Contributors 8

• JavaScript 78.7%

• Home New Posts Forum List Trending New Threads New Media Spy
• WikiPost Latest summaries Watched WikiPosts
• Support FAQ and Rules Contact Us

How to change menu and tab bar color in Safari?

• Thread starter iSayuSay
• Start date Jul 9, 2011
• Sort by reaction score

macrumors 68040

• Jul 9, 2011

macrumors 6502

you can't  

macrumors newbie

• Jul 15, 2011

Hi iSayuSay, I've been at this myself for quit a while now as well. I found a way to edit most of the safari browser. The buttons and the tabs. The only thing i cannot figure out is how the bigger grey area can be edited. Anyway for the tabs go to: applications > "right click" safari and "click" "Show package content" --> Content --> Resources and then you find all the buttons (including the tabs). Make sure you BACKUP your files here before you start to edit them. To edit use a program like photoshop and save it. If you want to edit the entire layout it's going to be a lot of work. It's the only solution if come across so far and like i said the only thing i can't find is the the image for the greater grey area. I reckon it's programmed into the application and therefore not easy to edit, not sure though. I hope this is clear and helps you out a bit.  

• Oct 25, 2015

Droxx said: Hi iSayuSay, Anyway for the tabs go to: applications > "right click" safari and "click" "Show package content" --> Content --> Resources and then you find all the buttons (including the tabs). Make sure you BACKUP your files here before you start to edit them. To edit use a program like photoshop and save it. If you want to edit the entire layout it's going to be a lot of work. Click to expand...

Attachments

• Nov 1, 2015

VickiB said: THANK YOU THANK YOU THANK YOU Click to expand...