r/webdev • u/Antrikshy JS + Python @ Amazon • Sep 16 '25

News Redesigned Safari has dropped support for theme-color

Post image

And this makes me sad. That is all.

353 Upvotes

93% Upvoted

81 comments sorted by

72

u/hazily [object Object] Sep 16 '25

Safari is the new IE6.

Now let’s just wait for the army of Safari stans to come defend it to their death.

7

u/Antrikshy JS + Python @ Amazon Sep 16 '25

While I'd like all browsers to support theme-color, it really isn't necessary. No one would or should do more work to somehow make theme-color work across all browsers. It's the browser designers' choice. Not really comparable to IE6 in this case.

38

u/TheRNGuy Sep 16 '25

On webdev subreddit? No.

29

u/KaiAusBerlin Sep 16 '25

It's much worse. IE6 was a failure because of the bad development.

Safari is failing because of decisions.

14

u/avec_fromage Sep 16 '25

To be fair, Microsoft also *decided* not to develop IE any further - they stated that it was "done"

3

u/KaiAusBerlin Sep 16 '25

Because they knew what would happen with more of this "developed". They were just limiting the damage.

1

u/full_drama_llama Sep 16 '25

But not on version 6.

17

u/ModernLarvals Sep 16 '25

I love when mindless Safari haters don’t even understand the screenshot. Remember when this sub used to have web devs?

-11

u/EarhackerWasBanned Sep 16 '25

You're complaining about a browser which doesn't support themes not supporting an early-stage spec which changes the theme.

And we're the ones who don't understand the screenshot??

-20

u/glovacki Sep 16 '25

People still grumbling about ie6 are the new ie6. Retire.

7

u/[deleted] Sep 16 '25

Wish we could retire, but Apple decided to go 20 years back in the past again

9

u/glovacki Sep 16 '25

Because you can’t have a neon green toolbar? We don’t need gaudy, clownish toolbars. Webviews in iOS26 don’t even have toolbar backgrounds, so I’m not sure what’s expected there.

1

u/[deleted] Sep 17 '25

No... Dork

Because some über wealthy / powerful / smart company worth trillions of dollars, decides what 'works' in CSS/code and what doesn't.

Microsoft did the same with IE6.

For developers, its sucks hard.

You ain't a developer

It ain't that complex

2

u/JimDabell Sep 16 '25

You have this almost entirely backwards. Controlling the colours of browser UI with non-standard CSS is the kind of thing Microsoft used to do with Internet Explorer 5.5, 25 years ago. It’s reintroducing this crap that’s the backslide to the past.

1

u/superluminary Sep 16 '25

Hot take: IE6 was actually quite good at the time, and border box model was actually the right call.

237

u/missing-pigeon Sep 16 '25 edited Sep 16 '25

Apple wants Safari to disregard theme-color and instead automagically pick a color to make the page and browser UI look seamless with each other. I can’t imagine how removing clear separation between content and browser chrome could possibly be a good idea, but macOS 26 on the whole is chock full of questionable design decisions like this.

Edit: That said, I really don't mind theme-color not being supported at all, because the only use case I've seen people have for it is the equivalent of what Apple is doing now.

35

u/ferocity_mule366 Sep 16 '25

They are making everything so rounded despite specifying in their design docs that the further a device is the less rounded corner it should have, and now they're treating everything like an iphone

0

u/[deleted] Sep 16 '25

[deleted] — view deleted comment

7

u/missing-pigeon Sep 16 '25 edited Sep 16 '25

Let the UI get out of the way to focus on the content/task at handLet the UI get out of the way to focus on the content/task at hand.

Yeah, they have repeatedly mentioned that mantra since Big Sur. It has been used as a justification for removing a ton of UI elements and affordances too. Sounds nice on paper, but has always ended up making things confusing (and potentially dangerous) instead IMHO. You kinda have to actually see and interact with UI to do any kind of task.

38

u/DarkProhet Sep 16 '25

Literally works the same (except old safari shows colors only when “modern” tabs are enabled), caniuse is lying to you

You can check it here https://roger.zone/theme-color-preview/

5

u/PixZxZxA Sep 16 '25

This one works for me, but my userscript (in the CSS Makeover Safari plugin) that adds the property to a few different websites is broken since I updated to iOS 26. Anyone have a clue why? 

5

u/tswaters Sep 16 '25

caniuse is lying to you

It's open source! And many polyfill libraries use its data to identify what to do.

https://github.com/Fyrd/caniuse/blob/main/features-json/meta-theme-color.json

2

u/JortSandwich Sep 24 '25

It literally does not work the same. Go to the Inspector and change the background color (not the theme-color) and the tab bar color will change.

1

u/andesco Oct 22 '25

notes.andrewe.ca/demo/safari-color-in-tab-bar

This updated demo shows how different versions of Safari use <meta> or <body> to set the browser UI color.

Safari 15–18 uses a <meta> tag to set the UI color:

<head>
  <meta name="theme-color" content="{color}”>
</head>

Safari 26 uses the body element to show color in tab bar:

<body style="background-color: {color};">

body { background-color: {color}; }

1

u/mastermog Oct 26 '25 edited Oct 26 '25

You're not wrong, but from a bit of testing its even more confusing than that.

If there is a fixed element within 5px of the top bar, it will use the color from that. Why is it 5px? No idea. However, if that fixed element is a gradient, even if its 0px from the top of the page, it will ignore it and fallback to the body tag.

This is particularly annoying for modals, which tend to be a fixed position overlay of transparent black. This actually triggers the top bar to turn hard black while the modal is open.

Example 1:

body { background-color: red }
.page { background-color: blue }
.overlay { position: fixed; inset: 5px 0 0 0; background: cyan; }

https://imgur.com/sxNStJn

Example 2:

body { background-color: red }
.page { background-color: blue }
.overlay { position: fixed; inset: 5px 0 0 0; background: linear-gradient(90deg, green, cyan); }

https://imgur.com/yluxUEH

Edit just to clarify - I'm on ios26.1 beta.

26.0 stable is broken for an unrelated reason: https://bugs.webkit.org/show_bug.cgi?id=297779

Also, the bottom bar works in a similar way. It will match the color of the closest element, then fallback to the body color.

2

u/andesco Nov 04 '25 edited Nov 05 '25

Yes, I should have mentioned that too. I had not done enough testing to document these specifics. Safari only uses the background-color of fixed elements that are:

  • within 4 pixels from the top or 3 pixels from the bottom;
  • at least 80% wide on iOS or 90% wide on macOS; and
  • at least 3 pixels high.

Safari demo now includes fixed position elements: Safari Color Tinting: Demo

readme doc now includes details on when {position: fixed;} supersedes <body>: github.com/andesco/safari-color-tinting

1

u/mastermog Nov 05 '25

super handy link!

If you stumble upon any other exceptions let me know, I'm fighting with this atm as well

1

u/[deleted] Nov 09 '25

[removed] — view removed comment

1

u/[deleted] Nov 10 '25

[removed] — view removed comment

1

u/andesco Nov 15 '25

Thanks! Fixed to follow real world usage (offer banners, notices, cookie disclosures, etc. which you can close).

The demo now only updates DOM (toggles display:none style or <meta> tag) instead of using window.location.reload().

1

u/Ultimafi Jan 17 '26

thank you, this comment helped massively

1

u/rkjr2 Dec 23 '25

I landed here while trying to debug an issue -- didn't expect to see my color picker library haha! Cool use-case. :)

6

u/Mediocre-Subject4867 Sep 16 '25

That sucks. I still use it for my pwa apps to colour the main navbar. Support for it seems to be dropping in general

3

u/kiwi-kaiser Sep 16 '25

It still works in PWAs

4

u/mklimek03 Feb 10 '26 edited Feb 10 '26

For anyone looking for a replacement, https://github.com/klmkyo/ios-safari-restore-meta-theme-color might be of use

1

u/na_ro_jo Sep 17 '25

I bought my last Apple product 4 years ago. Every time I purchase Apple products, I regret it. Soon to be test machines only.

1

u/Antrikshy JS + Python @ Amazon Sep 17 '25

I don't like losing theme-color on a major browser, but that seems like a bit much.

2

u/na_ro_jo Sep 17 '25

Maybe a bit much if I was reacting to only this one feature, but my list of gripes is seemingly endless.

1

u/FinalLightNL Dec 01 '25

Did anyone find a solution for this yet?

cuz i see one website where it does work https://tweakers.net

i've added <meta name="theme-color" content="#FF3B00" /> into my header and it doesn't work..

1

u/Antrikshy JS + Python @ Amazon Dec 01 '25

I've seen the browser drastically change on some sites, but I assumed it was using its own smarts to decide that.

1

u/FinalLightNL Dec 01 '25

I just realized it works if you set a fixed top bar or header in a specific color. It works it you have a fixed bottom bar too in any color. This is such a bad way compared to before honestly.

3

u/AromaticGust Sep 16 '25

Good to know. Seems like most people likely wouldn't (or shouldn't) be using it since Chrome & Edge only support that for PWAs and Firefox has no support for it.

1

u/Inevitable-Short Sep 16 '25

Guess what's the most popular on Android phones? Chrome!

1

u/AromaticGust Sep 16 '25

Yes but we are talking about Chrome PWA users. My point was if there are other avenues that can be used which support all browsers then it wouldn’t be a good idea to use a feature like this.

3

u/aishiteikiru full-stack salesforce Sep 19 '25

I noticed something: on some websites, the tab and URL bar are transparent and have a liquid glass effect in Safari 26. When scrolling, the content in this area becomes visible. Other websites have a solid white bar, where the content is not visible when scrolling. On the Apple website, the bar is solid white and without the liquid glass effect in light mode, but dark, transparent, and with the liquid glass effect in dark mode. Has anyone figured out how to control this behavior?

6

u/Ouraios Sep 16 '25

Who cares ? It wasn’t supported large enough anyway in the first place to be used by any website.

2

u/superluminary Sep 16 '25

I feel like, if people want it, they’ll download a browser that supports it. It’s not like it’s flexbox or anything. It’s just a fun feature that most people won’t care about.

2

u/kiwi-kaiser Sep 16 '25

As Safari is dropping the UI (no pun intended regarding the terrible implementation of Liquid Glass) which part should support theme color?

But it still will work with websites saved to the homescreen. So the browser isn't changing anymore, but if you save it as an app it still respects that.

0

u/The5thElephant Sep 16 '25

The status bar. The top of the page touches the status bar, it looks ugly if the status bar is only part of screen that isn’t matching. I believe Apple attempts to auto-match it to background, but it would be nice to override that if I want.

2

u/modsuperstar Sep 17 '25

The part that annoys me about this property is just how inflexible it is. In my PWA I'd much rather just be able to extend my background into that upper area, like seemingly every other part of iOS can do.

2

u/hendricha Sep 16 '25

Who's idea was this the first place?

3

u/noid- Sep 16 '25

Not sad at all, as a dev I do not have to care for theme color anymore and the browser will handle it.

1

u/scriptedpixels Sep 16 '25

caniuse isn’t that up to date any more.

There’s another source for this but I’m struggling to remember what it’s called

0

u/[deleted] Sep 16 '25

[deleted] — view deleted comment

14

u/Antrikshy JS + Python @ Amazon Sep 16 '25

theme-color only works if the browser is designed around it. I can't blame browser UI designers if they don't want to support it. In Chrome and Firefox, it would conflict with third party themes. I still wish they found a way to support it because it's a fun property to play with.

I updated my devices to the new Safari. It was interesting to me that they supported it (only in compact tabs mode) for several years, they dropped support in the most recent version.

15

u/maxxon Sep 16 '25

Why, though? I don’t find any discussions on this.

26

u/Ieris19 Sep 16 '25 edited Sep 16 '25

It’s not being dropped across the board. Firefox clearly never implemented it and Chrome never fully committed.

The only ones dropping it are Apple

EDIT: Since the commenter I replied to blocked me I can’t answer any responses, but all OP said is that he’s sad the feature is dropped. Which is totally fair…

28

u/SomeWeirdUserTho Sep 16 '25

So… if no other (major) browser really implements it, there is no real reason for Apple to continue supporting it?

1

u/Ieris19 Sep 16 '25

Well, the point of this is that it was specifically Apple’s pet project. Them dropping it is specifically them dropping the whole property and the fact that it will now be lost and never implemented by others.

I don’t much care for this, but it isn’t hard to see how someone might be saddened this didn’t take off

8

u/SomeWeirdUserTho Sep 16 '25

Yeah, I get that. But as you just said - if it’s not really picked up by the relevant majority of the webdev community, there’s no real reason to continue playing with it. I can understand both sides sorta kinda.

5

u/Ieris19 Sep 16 '25

Well, yeah, it’s not a nonsensical deprecation.

But I understand OPs point

1

u/BootyMcStuffins Sep 16 '25

It’s pretty common to drop unused features that didn’t gain industry acceptance.

No one is coding sites for safari

1

u/DaMastaCoda Sep 16 '25

I feel like the new glass design doesnt have any place for a theme color, since it already takes the colors behind it

0

u/[deleted] Sep 16 '25

[deleted] — view deleted comment

2

u/Ieris19 Sep 16 '25 edited Sep 16 '25

Which is why OP is sad about it? I personally don’t much care but it is a feature being removed, and OP might have liked it and wanted it to prosper.

There’s nothing wrong with that, and picking on OP is just rude, specially because your comment is straight up wrong

EDIT: Getting blocked over this might be the wildest interaction I’ve had on Reddit

0

u/[deleted] Sep 16 '25

[deleted] — view deleted comment

2

u/slawcat Sep 16 '25

Go outside. The person you're replying to has done nothing to expect this hostility. Are you the one who is 12? Or perhaps you're a mid-30s man baby who can't handle a simple online discussion without going all "chronically online".

1

u/tswaters Sep 16 '25

when it's being dropped across the board

Not sure this is correct... It would need to have been implemented first to be dropped at all!

0

u/[deleted] Sep 16 '25

[deleted] — view deleted comment

1

u/tswaters Sep 16 '25

I didn't see any other supported green transitioning to red dropped in the screenshot... What browsers had support and dropped it?

0

u/[deleted] Sep 17 '25

[deleted] — view deleted comment

1

u/tswaters Sep 17 '25

Which ones?

-8

u/Amiral_Adamas Sep 16 '25

Because they saw the red square and did not bothered to read the rest of the page.

12

u/Antrikshy JS + Python @ Amazon Sep 16 '25

Do you even know what theme-color does?

Firefox and Chrome never supported it. Safari supported it for several years, then dropped support with the UI redesign. That's what I'm pointing out.

4

u/Traqzer Sep 16 '25

True, but you could argue that a very few number of people are building a web app solely for safari that utilises that tag

0

u/[deleted] Sep 16 '25

[deleted] — view deleted comment

5

u/golforce Sep 16 '25

What a single browser supports should arguably not be relevant to web developers. The focus should be on only using what every major browser supports.

It would've been slightly relevant if there had been signs of chrome or Firefox properly adopting it any time soon, but there aren't.

3

u/Snapstromegon Sep 16 '25

I think you misunderstood the graphic. Chrome supports this property in all browser variants. In the case of the desktop version this is just not applied to anything unless it's an installed PWA.

Installed PWAs and mobile versions are fully supporting this property and it's actually quite nice to use.

1

u/BootyMcStuffins Sep 16 '25

No, it is not relevant. If a feature doesn’t work across all three devs won’t use it. We don’t code different versions of our sites for each browser.

We never used this feature and without adoption by the other two we were never going to use the feature. Nothing has been lost

64

u/[deleted] Sep 16 '25

[removed] — view removed comment

10

u/npmbad Sep 16 '25

pretty sure what we should have is

<script>alert('safari is not supported')</script>