Improve rendering and dark mode#2274
Merged
brianrob merged 1 commit intomicrosoft:mainfrom Aug 6, 2025
Merged
Conversation
- Update manifest to opt into PMV2 scaling (eliminates blurring on high DPI) - Tweak dark mode scroll bars to be more visible - Update to C# 11 - Update most packages to latest (updating Azure packages cause runtime failures) - Add Packages.props to the solution folder for simplicity - Hook various XAML files to pick up the theme - Set the WebView2 control preferred color scheme to match - Remove outdated Internet Explorer related <meta> tag - Change html sources to indicate that they support light and dark themes - Generate html with theme specific code I generally used two root entries `:root[data-theme="light"]` as it enables doing things like letting you flip the theme with a button (say to print). I didn't put that in this PR as I'm not super clear on the value. For future reference, here is how you would do that: ```html <style> @media print { .no-print { display: none !important; } </style> <button type="button" class="no-print" onclick="toggleTheme()">🌗 Toggle Theme</button> <script> // Simple theme toggle script: switches the data-theme attribute on <html> function toggleTheme() { const root = document.documentElement; const newTheme = root.getAttribute('data-theme') === 'light' ? 'dark' : 'light'; root.setAttribute('data-theme', newTheme); } </script> ``` I gave up on updating the Azure packages as they cause PerfView to fail at runtime. Would require a bit more time.
Member
Author
|
Member
Author
|
Member
Author
|
There might be value in looking at using a more current "fluent" style library to theme. There are still a lot of rough edges. :) |
brianrob
reviewed
Aug 6, 2025
Member
brianrob
left a comment
There was a problem hiding this comment.
@JeremyKuhne, these are some great changes. Thank you! A couple of follow-ups below.
brianrob
approved these changes
Aug 6, 2025
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
I generally used two root entries
:root[data-theme="light"]as it enables doing things like letting you flip the theme with a button (say to print). I didn't put that in this PR as I'm not super clear on the value.For future reference, here is how you would do that:
I gave up on updating the Azure packages as they cause PerfView to fail at runtime. Would require a bit more time.