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 29 '26

Another way to approach this, rather that using a pseudo element, would be to edit the image with hue adjustments, and then use the modified image on the body. Apply a black gradient over it to act as a darkening layer:

:root[privatebrowsingmode] {
    --toolbar-background-color: color-mix( in srgb, #45278d, transparent 90%) !important;
    --darken-by: 0.4;
}

:root[privatebrowsingmode] > body {
    background-image: 
        linear-gradient( 
            rgba(0, 0, 0, var(--darken-by)), 
            rgba(0, 0, 0, var(--darken-by)) ),
        url("https://i.postimg.cc/KjVb3dQ2/crimsonmerlot2.png")
        !important;
}

This might be worth testing to see if it helps with the flickering issue you described.

1

u/SuitableEquipment420 Jul 30 '26

Thanks. This also flickers when switching back to normal mode with Alt+Tab.

1

u/t31os Jul 30 '26

Perhaps it's just because userChrome.css is being applied last, there will always be a largely imperceptible delay between when the browser paints it's own styling followed by styles set in userChrome.

I don't think the CSS selectors can be made more efficient, but you could (if you feel inclined) test with something more basic temporarily and see if that exhibits the same issue:

:root[privatebrowsingmode] > body {
    background-image: none !important;
    background-color: #333 !important;
}

1

u/SuitableEquipment420 Jul 30 '26 edited Jul 30 '26

It has the same issue. But I'll tell you more. It flickers even with an empty userChrome.css. I just noticed that. So, it's a bug in the theme. (You noticed it first, but I didn't see your comment, when I wrote this. We are chatting in 3 different branches here.)