6

I updated to macOS v11.6 (Big Sur) and Safari 15.0 yesterday, and now Stack Exchange websites are defaulting to a "dark" toolbar on my machine. "Light" mode is set the system default under System Preferences, so this is strange.

This behavior only seems to occur on Stack Exchange sites; other websites are unaffected. All Stack Exchange sites that I have looked at are affected except for Stack Overflow, which remains in "light" mode.

Is this a problem on my machine, a bug in the Stack Exchange website code, a bug in Safari 15.0, or something else?

On further review it appears that Mathematics remains "light", Aviation has a sky-blue toolbar, Puzzling's is some garish cyan color, and Worldbuilding's is beige.

Safari 15.0:

Physics SE homepage, dark menu bar

Stack Overflow homepage, light menu bar

Puzzling SE homepage, cyan menu bar

Aviation SE homepage, light blue menu bar

Worldbuilding SE homepage, beige menu bar

Safari 14.1:

Physics SE homepage, light menu bar

Improve this question
7
  • 2
    Are you talking about the top bar on our site or the fact that your Safari menu is in dark mode?
    – Catija
    Commented Sep 22, 2021 at 14:31
  • 1
    @Catija: I'm talking about the Safari toolbar (URL, tab bar, bookmark bar) being in Dark Mode. The "top bar" on the StackExchange websites has always been black for me. I've added a screenshot from Safari 14.1 so the change is more obvious.
    – Michael Seifert
    Commented Sep 22, 2021 at 14:36
  • 2
    Ah, that makes sense now. This seems to be a relatively new feature in Safari 15. You might want to turn this post into a [feature-request] or post a new one. Otherwise, it's likely to get closed.
    – 41686d6564
    Commented Sep 22, 2021 at 14:38
  • @41686d6564: I'm fine with it being closed if (as it appears) it's just a weird new way that Safari behaves. The reason I posted it here is that I've only experienced on StackExchange so far; I haven't seen it on any other websites. But that may just be a function of how much time I spend on StackExchange compared to other websites. :-)
    – Michael Seifert
    Commented Sep 22, 2021 at 14:54
  • 4
    I'm going to add status-review to this because, while this is browser-dependent and we may end up coming back and saying that disabling this feature is the best solution, there may be other options that could address this without requiring every Safari user to disable this. I will say that I find it very confusing why Apple would choose to pull colors from the site theme in this way, without regard for appearance - the Puzzling example seems like it might be very difficult to read.
    – Catija
    Commented Sep 22, 2021 at 14:56
  • Here is the documentation for this feature: developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name/… developers.google.com/web/fundamentals/design-and-ux/… - The first link doesn't implement what is described, the second link does. For me this works on Chrome but not with Firefox Android. --- I don't know why Stack Exchange uses this CSS if they don't expect it to be supported on some browsers, when using it they need to choose an appropriate color; that provides a reasonable outcome - or refrain from using it.
    – Rob
    Commented Sep 22, 2021 at 16:11
  • @Rob Neither Chrome nor FF randomly picks colors if nothing is specified - meaning that the user can choose the color of their browser UI on their own. Safari tries to be clever by identifying a color if there isn't one provided - that's why this seems to be Safari's issue, not ours. I think animuson's answer explains this sufficiently?
    – Catija
    Commented Sep 22, 2021 at 16:35

2 Answers 2

Reset to default
11

This is a new feature that Apple considers to be a quality of life improvement for its users. We cannot manually disable it via our site - only you can do that in your browser settings. The only thing we can do is define which color should be used (and as far as I know, manually defining one may even override the Safari setting to disable using color). Defining them manually would be a high cost and achieve nothing:

  • If we use an actual color, then we end up annoying users on every single browser that supports that theme-color meta tag, instead of just Safari users. I am not sure if any other desktop browsers support this yet, but I know mobile browsers do (this is a standard that will likely be adopted more over time).
  • If we try to define some neutral color, we still annoy users (though maybe a bit less) because every browser uses a different toolbar color (and between dark and light mode) which would still cause the color to randomly switch whenever you're on our site.

Ultimately, if you find this annoying, you should complain to Apple for making it a default. The theme-color meta tag only takes a valid CSS color; it wasn't designed for sites to be able to disable the functionality when a browser suddenly decides to start automatically pulling in a color from the page. The only true solution to the current functionality is to disable it in your browser settings.

Improve this answer
1
  • Yep, this is expected behavior on Safari 15.
    – Aaron Shekey
    Commented Sep 22, 2021 at 15:39
6

After poking around further, I discovered that this option can be disabled in the "Tabs" pane of the Preferences window. (This same option was in the "Advanced" pane in the Monterey beta, as described in @animuson's article.) The check box is now labeled "Show color in menu bar"; disabling it returns you to the light toolbar that you know & love from Safari 14.

enter image description here

Improve this answer

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .