1847755 - Please add a 'dark mode' to the Mozilla Crash Reports UI

Status: NEW

(Socorro :: General, enhancement)

Description

[Bob Hood [:bhood]]

It's really hard on my eyes, because there's not enough contrast between the text and the glaring white background on my 4K monitor. Needs a dark mode setting.

Comment 1

[Will Kahn-Greene [:willkg] ET needinfo? me]

I talked with Lonnen a bit about how we might do this.

To figure out which mode the user prefers and make it sticky, we can either implement it by hand with a ui toggle that sets a cookie or we can use a media query. I don't know if there's a way to use a media query (which will set the preference based on the user's system / user agent) and override that with a ui toggle in cases where the user prefers but doesn't like dark mode or prefers but doesn't like like mode.

References:

• https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme
• https://css-tricks.com/dark-modes-with-css/

The CSS for Socorro is kind of all over the place, but dark mode typically involves overriding colors in specific places, so it might be doable without a lot of work and without refactoring what we already have.

I think the work is roughly something like this:

1. figure out whether to go with media queries, some ui toggle, or a combination of the two
   1. for the ui toggle, we'll want a Django middleware that uses the cookie value, puts something in the request context, and then renders that in the template
   2. for the media query, we'll just do it in css
2. go through the CSS and add dark mode color overrides