### STR 1. Open a private browsing window in a fresh profile (without dark mode enabled) so that a promo card is displayed in about:privatebrowsing, with a primary colored button (probably will say Pin to taskbar) ### Expected The button should have dark gray text (#2B2A33) on a cyan background (#00DDFF), see [figma prototype](https://www.figma.com/file/FAZxkK9IRLlCqyhXBqId7e/Auto-Cookie-Banner-Consent-Desktop-%26-Mobile?node-id=2755%3A34246&t=B7x0gp5yQBJoVamb-1) ### Actual The button has white text on a blue background — the primary button color for light mode. Switching to dark mode (e.g. with `ui.systemUsesDarkTheme`) changes the button's color to what it should be. But that's not part of the private browsing implementation, it's just the prefers-color-scheme media query in the common styles. This is the only element I noticed but I was thinking we should just do a general audit of these styles. Or maybe it would be better overall if we override the media query on about:privatebrowsing. This should be pretty easy to do, by [overriding this rule](https://searchfox.org/mozilla-central/rev/3067ba33c2202459aae52b7a0f7218a71fe5f7c3/browser/themes/shared/tabs.css#21-23) for about:privatebrowsing. [contentTheme.js](https://searchfox.org/mozilla-central/rev/3067ba33c2202459aae52b7a0f7218a71fe5f7c3/browser/base/content/contentTheme.js#43-64) (used by other system pages) uses an inline style on the browser element to do this, and I guess we might want to do that just for the sake of being thorough. An alternative would be to specify the styles we want manually, but that will require a lot more maintenance trying to keep up with changes to the common styles, when we could just inherit them by forcing the colors cheme.
Bug 1817882 Comment 0 Edit History
Note: The actual edited comment in the bug view page will always show the original commenter’s name and original timestamp.
### STR 1. Open a private browsing window in a fresh profile (without dark mode enabled) so that a promo card is displayed in about:privatebrowsing, with a primary colored button (probably will say Pin to taskbar) ### Expected The button should have dark gray text (#2B2A33) on a cyan background (#00DDFF), see [figma prototype](https://www.figma.com/file/FAZxkK9IRLlCqyhXBqId7e/Auto-Cookie-Banner-Consent-Desktop-%26-Mobile?node-id=2755%3A34246&t=B7x0gp5yQBJoVamb-1) ### Actual The button has white text on a blue background — the primary button color for light mode. Switching to dark mode (e.g. with `ui.systemUsesDarkTheme`) changes the button's color to what it should be. But that's not part of the private browsing implementation, it's just the prefers-color-scheme media query in the common styles. This is the only element I noticed but I was thinking we should just do a general audit of these styles. Or maybe it would be better overall if we override the media query on about:privatebrowsing. This should be pretty easy to do, by [overriding this rule](https://searchfox.org/mozilla-central/rev/3067ba33c2202459aae52b7a0f7218a71fe5f7c3/browser/themes/shared/tabs.css#21-23) for about:privatebrowsing. [contentTheme.js](https://searchfox.org/mozilla-central/rev/3067ba33c2202459aae52b7a0f7218a71fe5f7c3/browser/base/content/contentTheme.js#43-64) (used by other system pages) uses an inline style on the browser element to do this, and I guess we might want to do that just for the sake of being thorough. An alternative would be to specify the styles we want manually, but that will require a lot more maintenance trying to keep up with changes to the common styles, when we could just inherit them by forcing the color scheme. Though I'm not sure if there's an easy place to slot this behavior in specifically for about:privatebrowsing, as it requires JS access to the browser element (the element in the chrome where the content viewer is inserted)