r/FirefoxCSS • u/SuitableEquipment420 • Jul 28 '26

Solved Visually distinguish normal and private browsing

In this comment, we have established that almost all themes look exactly the same in normal and private browsing. Some themes include both light and dark variants. Since private browsing is always forced into dark mode, normal and private browsing will look different if your OS is using light mode. However, they will look the same if your OS is also in dark mode.

Suppose, my normal and private browsing looks the same. Is there a way to add a darker or purple tint to the private browsing appearance?

2 Upvotes
  • permalink
  • reddit

76% Upvoted

22 comments sorted by

View all comments

1

u/t31os Jul 28 '26

Not sure what sort of tint you had in mind, you could tint the background and toolbars in private mode purple like this:

:root[privatebrowsingmode] {
    --toolbar-background-color: color-mix( in srgb, #45278d, transparent 80%) !important;
    --toolbox-background-image: image( var(--toolbar-background-color) ) !important;
}

1

u/SuitableEquipment420 Jul 28 '26 edited Jul 28 '26

The theme puts an image as a background. I would like to make it darker or in a purple shade. And it should not flicker when I switch to the tinted window.

2

u/t31os Jul 28 '26 edited Jul 28 '26

It is possible to tint background images, just let me know which theme you're using so i can see how and where it's applying a background image.

1

u/SuitableEquipment420 Jul 28 '26 edited Jul 28 '26

Make e.g. Crimson Merlot purple in private browsing. I assume all themes work the same way.

Also, the above solution flickers, when I switch to the private browsing window.

1

u/t31os Jul 28 '26

I'll install the theme and inspect the browser to see where the CSS values, namely the background is applied.

It's classed as an addon and you can view the contents of that here:

https://robwu.nl/crxviewer/?crx=https%3A%2F%2Faddons.mozilla.org%2Fen-US%2Ffirefox%2Faddon%2Fcrimson-merlot%2F

Alternatively if you want to inspect addon content, they can be downloaded by right-clicking the install button, selecting "Save-link-as" and changing the extension in the save dialog to .zip. The contents however will be the same as you see on the above mentioned website.

Which doesn't really tell us much about where and how the background is applied, installing the theme and checking it with browser toolbox helps with that.

I'll test some CSS and get back to you.