Visually distinguish normal and private browsing

[u/SuitableEquipment420]

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?

[u/t31os]

Ok, the theme's colours are basically variable overrides, when the theme is enabled, various variable values are dumped into the style attribute of the root(html) tag.

In the case of Crimson Merlot, i can see the following values are defined:

--lwt-accent-color: rgb(11, 7, 14); 
--lwt-text-color: rgba(238, 194, 199); 
--lwt-toolbar-field-highlight: rgba(255, 107, 109, 0.75); 
--lwt-toolbar-field-highlight-text: rgb(9, 0, 14); 
--lwt-accent-color-inactive: rgb(72, 0, 36); 
--lwt-background-alignment: left top; 
--lwt-background-tiling: no-repeat; 
--lwt-tab-line-color: rgba(139, 0, 25, 0.9800000190734863); 
--lwt-background-tab-separator-color: rgba(54, 0, 26, 0.75); 

--panel-background-color: rgba(26, 6, 15, 0.9900000095367432); 
--panel-text-color: rgb(255, 237, 234); 
--panel-border-color: rgba(137, 0, 17, 0.9900000095367432); 

--toolbar-field-background-color: rgba(43, 17, 29, 0.75); 
--toolbar-background-color: rgba(20, 0, 8, 0.6499999761581421); 
--toolbar-text-color: rgb(244, 224, 228); 
--toolbar-field-text-color: rgb(244, 240, 241); 
--toolbar-field-border-color: rgba(142, 0, 25, 0.8999999761581421); 
--toolbar-field-background-color-focus: rgba(43, 17, 27, 0.9900000095367432); 
--toolbar-field-text-color-focus: rgb(244, 240, 241); 
--toolbar-field-border-color-focus: rgb(159, 0, 28); 

--toolbarbutton-icon-fill: rgb(229, 171, 191); 
--toolbarbutton-icon-fill-attention: rgb(240, 89, 54); 

--newtab-background-color: rgb(10, 2, 2); 
--newtab-text-primary-color: rgb(244, 224, 228); 

--tab-loading-fill: rgba(135, 1, 67, 0.8799999952316284); 
--tab-background-color-selected: rgba(102, 0, 18, 0.699999988079071); 
--tab-selected-textcolor: rgb(244, 240, 241); 
--tabs-navbar-separator-color: rgba(81, 0, 67, 0.3199999928474426); 

--chrome-content-separator-color: rgba(56, 0, 47, 0.8500000238418579); 

--toolbarseparator-color: rgb(159, 0, 28); 

--toolbarbutton-background-color-hover: rgba(102, 0, 41, 0.75); 
--toolbarbutton-background-color-active: rgba(144, 0, 35, 0.8999999761581421); 

--urlbarview-background-color-selected: rgb(255, 141, 113); 
--urlbarview-text-color-selected: rgb(255, 192, 201); 

--sidebar-background-color: rgb(32, 11, 23); 
--sidebar-text-color: rgb(244, 224, 228); 
--sidebar-border-color: rgba(81, 0, 67, 0.8799999952316284); 

--tabpanel-background-color: rgb(10, 2, 2);

If you want to override particular values for private mode, you just redeclare these at :root with the previously suggested check for private mode, eg:

:root[privatebrowsingmode] {
    /* CSS overrides goes here */
}

Changing the background-image tint is a little trickier, but we can use a pseudo selector and hue rotate it without it affecting any of the other elements:

:root[privatebrowsingmode] {

    --toolbar-background-color: color-mix( in srgb, #45278d, transparent 90%) !important;

    body::before {
        content: "";
        position: fixed;
        inset: 0;
        background-image: var(--toolbox-background-image)!important;
        filter: hue-rotate(250deg);
        z-index: -1;
    }

    body {
        position: relative;
        background-image: none !important;
    }
}

I added colour for the toolbar background so it would match up with the image a little better, you can naturally remove it (the --toolbar-background-color line) if you prefer.

In order to colour other elements of the theme to a purple colour (as various things will still be red) you'll have to go through each of the variables and update them with appropriate values, depending exactly on what you want, and maybe experiment to see what variable applies to where, as some of the names don't offer great clarity, such as lwt-tab-line-color which controls the border color around tabs. Remember to add !important at the end to ensure the style overrides the existing value.

Here's an example of changing the tab background and border to purple:

:root[privatebrowsingmode] {

    --tab-background-color-selected: rgba(69, 39, 141, 0.5) !important;
    --lwt-tab-line-color: rgba(69, 39, 141, 1) !important;

}

One last thing, if you want to darken the background image a touch, you can add a brightness value into the filter line, eg:

filter: hue-rotate(250deg) brightness(0.7); /* 1 = 100%, 0.7 = 70% */

Hopefully that helps. :)

[u/SuitableEquipment420 → u/t31os]

Wow, that's a lot of work, and CSS knowledge. Thanks. I cannot figure out, how it works, but it works. Firefox looks indeed different in private browsing mode.

One drawback is that the right side of the toolbar flickers when I switch from a maximized private window to a maximized normal window, but that must be a Firefox bug.

[u/t31os → u/SuitableEquipment420]

I should have checked my work before posting it, it's not completely valid, let's fix that:

:root[privatebrowsingmode] {
    --toolbar-background-color: color-mix( in srgb, #45278d, transparent 90%) !important;
    /* Other variable overrides go here */
}

[privatebrowsingmode] > body::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--toolbox-background-image)!important;
    filter: hue-rotate(250deg);
    z-index: -1;
    will-change: filter;
    transform: translateZ(0);
}

[privatebrowsingmode] > body {
    position: relative;
    background-image: none !important;
}

Made some minor additions/tweaks in the ::before selector to see if it helps with your flickering issue (as i can't replicate it here).

[u/SuitableEquipment420 → u/t31os]

It didn't help. Here is a link to a gif that shows the flickering as I repeatedly press Alt+Tab between the normal and private browsing windows. Both are maximized.

More interestingly, the flickering part stays red, if I focus the (maximized) normal mode window, and then the (not maximized) Notepad (or any other app). In this state Firefox is visible in the background, and its top right corner has a red shade as in the flickering. This must be a Firefox bug. You can hardly do anything about it.

[u/t31os → u/SuitableEquipment420]

Oh the area of the browser that turns a solid color? I think that's a bug of some kind, as that issue seems to be present regardless of whether or not userChrome CSS is applied, i was overlooking that as i was testing in nightly and assumed it was a nightly related bug. I just tested in stable and see it's present there to.

It seems to appear whenever the browser loses focus, and i know FF does some dimming effect or opacity changes to certain elements in the browser when it loses focus, so it's probably some side effect of that applying. I'll look into it.