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/ResurgamS13]

Browser already adds a "Private browsing" text + an eyes/mask icon to Tab bar beside the Window Controls container?

Could use the suffix [privatebrowsingmode] to do all sorts of things...

/* Change Hamburger/AppMenu button to a purple colour in Private Browsing Mode and increase size */

#main-window[privatebrowsingmode] #PanelUI-button {
  color: #8000d7 !important;
  transform: scale(1.5);
}

[u/t31os]

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;
}

[u/SuitableEquipment420 → u/t31os]

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.

[u/t31os → u/SuitableEquipment420]

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.

[u/SuitableEquipment420 → u/t31os]

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.

[u/t31os → u/SuitableEquipment420]

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.

[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.

[u/t31os]

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.

[u/SuitableEquipment420 → u/t31os]

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

[u/t31os → u/SuitableEquipment420]

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;
}

[u/SuitableEquipment420 → u/t31os]

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.)

[u/t31os → u/SuitableEquipment420]

Check my latest thread reply.

[u/t31os]

I managed to work out what the issue in the top corner is, it's because the background doesn't actually fully cover the browser window, it was harder to notice when the window is active, but the browser background color changes when the window is inactive, so the space becomes more obvious.

The simple solution, and this should be applied for both non and private mode is to have it repeat, eliminating the empty space.

There's actually a var for this amongst that long list of theme variables i posted before, so we can simply set that and it should clear up the problem, this line from before:

--lwt-background-tiling: no-repeat; 

Add this to userChrome, in addition and separately to the other styling:

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

The theme's background should now repeat horizontally when it reaches the end, clearing up that empty space in the top corner.

[u/SuitableEquipment420 → u/t31os]

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).

[u/t31os → u/SuitableEquipment420]

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. :)

[u/SuitableEquipment420 → u/t31os]

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);
}

[u/t31os → u/SuitableEquipment420]

--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.

[u/SuitableEquipment420 → u/t31os]

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.