Theme Detection (Dark Mode)#246
Theme Detection (Dark Mode)#246tlmii merged 6 commits intomicrosoft:mainfrom tlmii:dev/system-theme-detection-and-dark-mode
Conversation
tlmii
requested review from
JamesNK,
leslierichardson95,
smitpatel and
vnbaaij
|
Cropped too much, but you can see the menu background is a solid color. It also extends to the bottom of the page now: Traces: Trace: |
|
Traces looks 100% better than I thought it would. Not great, but not a train wreak 😄 |
| <link rel="stylesheet" href="_content/Aspire.Dashboard/css/app.css" /> | ||
| <link rel="stylesheet" href="_content/Aspire.Dashboard/Aspire.Dashboard.bundle.scp.css" /> | ||
| <HeadOutlet @rendermode="@RenderMode.InteractiveServer" /> | ||
| <style>@@media (prefers-color-scheme: dark) { body { background-color: #333333; } }</style> |
There was a problem hiding this comment.
Is this to avoid flash of white on page load? Add a comment.
There was a problem hiding this comment.
That's right. The custom properties (e.g. --neutral-fill-rest) aren't available at this point so I just took the raw color. Makes sure the page loads dark.
Yeah most of the accent colors worked OK. There were just a few places where the background or foreground was hardcoded to white/gray/black that needed to be tweaked. Some things definitely won't pass accessibility testing at the moment but I'll file bugs on those later this week. |
Don't use FluentDesignSytemProvider and move injects to .cs file
Use standard luminosity values and use BaseLayerLuminance design token
Undo some unnecessary renaming
5 participants
Resolves #216
The TL;DR here is "dashboard will use dark mode if the system is set to dark mode, and will use light mode otherwise".
The implementation is a little more complicated. To avoid a flash of bright white when setting dark mode at runtime, we track the last system setting in a cookie and use that cookie to render the initial state. You'll still get a flash of bright white the first time you load the site at a particular URL, but every time after that (including after stopping the debugger, exiting the app, etc) you won't. We also use a basic inline CSS style to set the initial background color to a dark color to avoid the same thing.
I tweaked some of the colors in the /Traces and /Trace pages to work better with dark mode. I didn't try to be exhaustive, just make sure there wasn't any dark-on-dark or light-on-light colors happening. I also made a small adjustment to the menu background.
Screenshots to follow.