Add dark theme for low/medium risk error pages

[NotWoods]

Why/User Benefit/User Problem

Currently, our error pages (connection issue, SSL error, etc) are on light backgrounds and cannot be controlled by extensions like Dark Reader.

High risk pages have a colored background and should be left alone.

What/Requirements

We should have dark versions of these screens that are used if Fenix is in dark mode. The background could be changed to #24193c and the button could be changed to #f9f9fb (inverting the current color scheme).

Acceptance Criteria (how do I know when I’m done?)

Error pages have dark backgrounds in dark mode.

┆Issue is synchronized with this Jira Task

[brampitoyo]

@NotWoods Great idea!

As we’ve specced out in the Material UI library, our dark colour scheme is as follows:

• Foundation (background): Dark Grey 80 #15141a
• On-Dark (text): Light Grey 5 #fbfbfe
• Accent (colour of primary buttons): Violet 50 #9059ff
• Secondary Buttons (colour of secondary buttons like “Advanced”): Dark Grey 20 #4a4a55
• Accent Bright (colour of text links and text-only buttons): #ab71ff

An example of this colour scheme looks like this:

To note: this colour scheme applies to low and medium-risk error pages (content crashed, SSL errors, etc.). For high-risk pages (malware warnings), we should keep using the red background colour. It’s meant to be jarring.

Here’s an Abstract link to the rest of the dark theme error pages:
https://share.goabstract.com/108da5e3-6d39-4f87-a35d-91c6e78d7ee5

I’ll just ping @AmyYLee here to double-check the colour values, particularly the secondary buttons.

[AmyYLee]

@NotWoods Great idea!

As we’ve specced out in the Material UI library, our dark colour scheme is as follows:

* Foundation (background): Dark Grey 80 `#15141a`

* On-Dark (text): Light Grey 5 `#fbfbfe`

* Accent (colour of primary buttons): Violet 50 `#9059ff`

* Secondary Buttons (colour of secondary buttons like “Advanced”): Dark Grey 20 `#4a4a55`

* Accent Bright (colour of text links and text-only buttons): `#ab71ff`

An example of this colour scheme looks like this:

To note: this colour scheme applies to low and medium-risk error pages (content crashed, SSL errors, etc.). For high-risk pages (malware warnings), we should keep using the red background colour. It’s meant to be jarring.

Here’s an Abstract link to the rest of the dark theme error pages:
https://share.goabstract.com/108da5e3-6d39-4f87-a35d-91c6e78d7ee5

I’ll just ping @AmyYLee here to double-check the colour values, particularly the secondary buttons.

Can you follow this for the secondary button:
• Button - Light Grey 30 #E0E0E6
• Text in button - Ink 20 #312A65

See reference below. Thanks!

[ekager]

Reopening for QA

[sflorean]

Tested this on Nightly 6/4 with Google Pixel 3 (Android 10), Nokia 6 (Android 7.1.1), and LG G7 FIT (Android 8), and I confirm that the pages are changing the background colour based on the app theme. The testing pages included:

To note: this colour scheme applies to low and medium-risk error pages (content crashed, SSL errors, etc.). For high-risk pages (malware warnings), we should keep using the red background colour.