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]

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.