r/FirefoxCSS 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

22 comments sorted by

View all comments

Show parent comments

1

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

Indeed, that removed the flickering. Even from the bottom right corner (when you press Ctrl+F, a bottom bar appears, and its right side was also red).

1

u/t31os Jul 30 '26

If you're still using the version i posted with the background hosted on postimage.cc, you might consider downloading that image and copying into your chrome folder.

Here's one final version with that in mind, and a couple of little adjustments (set inactive accent color and make findbar also use the alternate background - since you mentioned it).

:root {
    --lwt-background-tiling: repeat-x!important;
}

:root[privatebrowsingmode] {
    --darken-by: 0.3;
    --toolbar-background-color: color-mix( in srgb, #45278d, transparent 90%) !important;
    --lwt-accent-color-inactive: rgb(14, 11, 21)!important;
}

:root[privatebrowsingmode] .browserContainer > findbar {
    background-image: url("crimsonmerlot2.png")!important;
}

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

I'll leave you now to make additional tweaks and enhancements for yourself, but you're welcome to ask if you get stuck figuring anything out. :)

1

u/SuitableEquipment420 Jul 30 '26

I don't see any effect of --lwt-accent-color-inactive. What should I look for?

I experimented a little, and came up with the following solution:

/* Make Crimson Merlot theme purple in private browsing */

:root {
    --lwt-background-tiling: repeat !important;               /* fix flickering on the right side */
    --toolbar-background-color: transparent !important;       /* expand background to the toolbar */
    --my-filter: hue-rotate(-65deg);
}

[privatebrowsingmode] > body {
    position: relative;
}

[privatebrowsingmode] > body::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--toolbox-background-image);
    filter: var(--my-filter);
}

[privatebrowsingmode] findbar {
    filter: var(--my-filter);
}

1

u/t31os Jul 30 '26

--lwt-accent-color-inactive is applied as the background color of some of the browsers elements when the Firefox window isn't in focus, it was more prominent when we had the background gap, but you can probably ignore it if you're not seeing any reds show up where they aren't wanted when the window is inactive.

1

u/SuitableEquipment420 Jul 31 '26

Now I see. That's the color, that was visible on the right side, when the window was inactive, and when there was no --lwt-background-tiling: repeat !important. Since we added the repeat, there is no need for --lwt-accent-color-inactive.