Forcing dark titlebar (not tabs) on MacOS

[kocane]

This is probably a long shot as I'm almost positive that it's outside the possibilities of CSS but could there be any way to force the titlebar color to be of the dark system theme, even when using "Light" mode, in MacOS? (Using the Tinting/Vibrancy functionality)

[QNetITQ]

There was definitely such a possibility before. Now there are no separate properties for light and dark themes, as far as I know. You can try using the color-scheme property, but I'm not sure that it will work for system transparency.

#navigator-toolbox::after
{
    color-scheme: dark !important;
}

[kocane]

Hmm, I feared this. It seems like the code you posted doesn't have any affect at all :/

[QNetITQ]

Try another code.

#main-window
{
    color-scheme: dark !important;
}

[kocane]

Sadly, no dice :-( it doesn't have an affect. Appreciate the attempt though!

[QNetITQ]

The effect should be there if the light theme is selected in the browser. Apparently you already have a dark theme selected, so this did not give the result.

There is a way to get the result you want, but with reservations. Enable the dark theme in the OS. In the browser, select the system theme. Then use the code below. It should work.

:root
{
    color-scheme: light !important;
}

[QNetITQ]

I did a little research. I managed to get a dark version of the Mica on Windows 11, with the light theme active in the operating system, without third-party programs. I think it should work the same on MacOS.

Try choosing a light theme in the operating system, a system theme in the browser and use the code below. The browser should become dark. If the transparency also changes, then this can be done with styles, you just need to find the object to which the transparency is applied. I don't have a virtual machine right now, so I can't see for myself.

*
{
    color-scheme: dark !important;
}

[kocane]

Nope :( no effect. I know I'm applying it correctly since I can add display: none and watch the titlebar disappear completely. But whatever 'color-scheme' is set to, doesn't change anything. Is there any use of me using one of the tools to inspect the gui, to try and find out where the transparency part is stored on a Mac?

[QNetITQ]

This code should make the transparency dark, but nothing more. Need to check.

#TabsToolbar::after
{
    color-scheme: dark !important;
}

[kocane]

Doesn't seem to work :/ Can I do anything to help troubleshoot? if you conclude it's simply not possible to restrict dark mode to the titlebar, I will of course accept this also. Thanks again for helping.

[QNetITQ]

Unlike Windows and Linux, transparency has always been very difficult to implement on MacOS. That's where all the complications come from. I have to act blindly, since I don't have a virtual machine now, and I also have to rewrite the appearance property, which I've never had to do before. Maybe I'll just install a virtual machine and see for myself when I have time.

[kocane]

Could imagine - especially hard doing this blindly. I can provide you a macOS VM via TeamViewer or something, if it's any easier.

Not that this functionality is that important but I still think it could look pretty cool.

[kocane]

@QNetITQ now that Firefox on Windows also has Mica/Acrylic in titlebar support, do you think doing something similar here is possible?

Getting something similar to your example screenshot for DWMBlurGlass would be awesome:

[QNetITQ]

It depends on the method of obtaining transparency.

• If you install third-party software, then all settings must be done through it.

• If you use system APIs, then everything is a little different.

  • Acrylic does not have its own background color, so the color can be added manually through CSS.
  • Mica/MicaAlt use the system color. To change it, you will have to call the dark version through the color scheme.

:root
{
    color-scheme: dark !important;
  
    & > *
    {
        color-scheme: light dark !important;
    }
  
    .browser-titlebar
    {
        color: white !important;
    }
}

[kocane]

Cool, thanks. It works. Seemingly works. But it's looking awfully opaque. Do you know if that's just the way it is?

Using the "Acrylic" option in StartAllBack does yield the same result though, so I guess it's just the way it is. StartAllBack also has a "blur" option, though, which is much more transparent. I wonder if Firefox can be made to use the same method, I believe it's part of Windows.

[kocane]

also, if I use the "show accent colors on title bars and window borders" functionality in Windows (which I mostly like) it overwrites mica/acrylic in Firefox as well. Are you aware of any method to overwrite this?

[QNetITQ]

Then enable transparency for Windows 10. It also works on Windows 11. This option will allow you to use an accent color simultaneously with other system effects.

So all that remains is to use third-party software or enable Acrylic through the browser (Firefox 138+). In the screenshot, DWMBlurGlass was used.

[tomhenry56]

Interesting thread! Thanks for digging so deep into this — it’s surprising how tricky forcing just the titlebar into dark mode can be without affecting the rest of the UI.

I’ve run into similar frustration on MacOS when trying to keep only the titlebar dark while the rest stays light. The color-scheme property helps a bit, but yeah, it usually affects the whole window rather than the native titlebar itself, since that’s controlled by system-level tinting.

If you do manage to find a CSS-only workaround or even a hybrid solution (maybe combining AppleScript or a helper tool), please share! Would love to test it too.
nashville window tinting
And random side note for anyone here also into home upgrades: I recently came across nashville window tinting — pretty handy for reducing glare on screens near windows. 😊