Restyle error ui and reconnection ui #1527
Conversation
adamint
requested review from
JamesNK,
drewnoakes,
leslierichardson95,
tlmii and
kvenkatrajan
dotnet-issue-labeler
bot
added
the
area-codeflow
|
Can the background in dark mode be darker? The screenshots make it seem quite bright. |
| @@ -49,7 +49,7 @@ fluent-toolbar[orientation=horizontal] { | |||
|
|
|||
| --error-ui-foreground-color: #000000; | |||
| --error-ui-accent-foreground-color: #512bd4; | |||
| --reconnection-ui-bg: #D1D1D1; | |||
| --reconnection-ui-bg: #D6D6D6; | |||
There was a problem hiding this comment.
I feel like this is probably still too bright. Did you update the screenshots in your PR description with the end state here? I'd expect the bg color to be largely unchanged, just an overlay that darkens what's there and makes is easier for the error content to float over the top.
There was a problem hiding this comment.
@drewnoakes we are not able to make it any darker with the current foreground colors. This bg is the exact limit - note that the actual visible color is darker due to the opacity
There was a problem hiding this comment.
Right, but the foreground colours are for light mode.
The thing I'm trying to avoid is flashing a large bright area in users' eyes, when they're in dark mode. A dark background with light foreground should achieve that, and meet contrast ratio requirements.
We had problems with contrast issues with dark theme for the error ui, as well as the reconnection ui, which is provided by default by the blazor framework (resolves #1464)
You can see below and after pictures below. The first image in each category is the error ui, the second the reconnecting in progress ui, and the third is the reconnection failed ui.
Before
Light theme:
Dark theme:
After
Light theme:
Dark theme:
Microsoft Reviewers: Open in CodeFlow