Skip to content

Darken TabControl in dark mode #12471

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 4 commits into
base: main
Choose a base branch
from

Conversation

willibrandon
Copy link
Contributor

@willibrandon willibrandon commented Nov 13, 2024

Fixes #11953

Proposed changes

  • Style TabControl and make it dark in Dark mode.

Customer Impact

  • Fixes an issue with TabControl not being dark enough in Dark mode.

Regression?

  • No

Risk

  • I believe the risk is low.

Screenshots

Before

TabControlDarkModeBefore

After

TabControlDarkModeAfter

Test methodology

  • Manually tested via scratch project.

Test environment(s)

.NET SDK:
 Version:           9.0.100
 Commit:            59db016f11
 Workload version:  9.0.100-manifests.c6f19616
 MSBuild version:   17.12.7+5b8665660

Runtime Environment:
 OS Name:     Windows
 OS Version:  10.0.26120
 OS Platform: Windows
 RID:         win-x64
 Base Path:   C:\Program Files\dotnet\sdk\9.0.100\
Microsoft Reviewers: Open in CodeFlow

Copy link

codecov bot commented Nov 13, 2024

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 61.35198%. Comparing base (1f3ba53) to head (549b0d8).

Additional details and impacted files
@@                 Coverage Diff                 @@
##                main      #12471         +/-   ##
===================================================
+ Coverage   61.34945%   61.35198%   +0.00253%     
===================================================
  Files           1547        1547                 
  Lines         158479      158479                 
  Branches       14751       14751                 
===================================================
+ Hits           97226       97230          +4     
+ Misses         60551       60548          -3     
+ Partials         702         701          -1     
Flag Coverage Δ
Debug 61.35198% <ø> (+0.00253%) ⬆️
integration 10.73289% <ø> (ø)
production 39.22081% <ø> (+0.00415%) ⬆️
test 95.67947% <ø> (ø)
unit 36.65120% <ø> (+0.00207%) ⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@willibrandon
Copy link
Contributor Author

This is not an area I specialize in and could use some guidance. My plan is to help tackle the remaining dark mode help wanted issues if this approach is acceptable. I have done my best to glean from the work that has already been done and have been experimenting with the dark mode themes that I see in .msstyles.

Am I correct that in an ideal world these controls would not require this additional styling?

@xPaw
Copy link
Contributor

xPaw commented Nov 14, 2024

These are also tackled in #11985

@willibrandon
Copy link
Contributor Author

These are also tackled in #11985

To me it looks like that PR could be the start of a new API proposal. In this PR, my goal is to fix the issue without introducing any new public APIs.

@Tanya-Solyanik Tanya-Solyanik added the area-DarkMode Issues relating to Dark Mode feature label Jan 7, 2025
@@ -1771,6 +1779,9 @@ private bool ShouldSerializeItemSize()
return !_padding.Equals(s_defaultPaddingPoint);
}

private BOOL StyleUpDown(HWND handle)
=> PInvoke.SetWindowTheme(handle, $"{DarkModeIdentifier}_{ExplorerThemeIdentifier}", null).Succeeded;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copy link
Member

@Tanya-Solyanik Tanya-Solyanik Jan 24, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe we should theme only immediate child windows, the ones whose .Parent in this TabControl?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe we should theme only immediate child windows, the ones whose .Parent in this TabControl?

Is this covered in the design document somewhere? 😄

Let me know what you would like me to do, but my thought is if a user enables dark mode and the control is ultimately not dark, not dark enough, or not consistently dark, then the user might object. However, like you eluded to, some users might expect for immediate and child controls to be styled dark, but not any of the grandchildren. It's a little harder for me to envision why users would expect this scenario but my knowledge, experience, and use cases are more limited than yours. If I were the user I would expect a sensible default with an option to override.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I thought that goal of our PR was to theme page headers and the spinner control, page bodies and their children are already themed. Is {DarkModeIdentifier}_{ExplorerThemeIdentifier} an appropriate theme identifier for other windows?

Copy link

@Copilot Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copilot reviewed 2 out of 2 changed files in this pull request and generated no comments.

@Tanya-Solyanik
Copy link
Member

@willibrandon - had you tested tab controls with various child controls in the pages? Including nested tab controls?

@Tanya-Solyanik Tanya-Solyanik added the waiting-author-feedback The team requires more information from the author label Jan 24, 2025
@willibrandon
Copy link
Contributor Author

@Tanya-Solyanik - I need 24 to 48 hours before I can get back to this but I am eager to do so. I've been studying quite a lot about color science and WCAG compliant contrast ratios.

@willibrandon
Copy link
Contributor Author

@willibrandon - had you tested tab controls with various child controls in the pages? Including nested tab controls?

@Tanya-Solyanik - Just getting back to this now. I will manually test the tab control with various child controls in the pages now. In the meantime, do you have suggestions on how I might test this change in an automated way? Does it make sense to put this in an automated test? And lastly, is there already an established way of testing dark mode support?

Please let me know, and if you can describe it or show me an example, then I will automate the test and iterate until everyone is confident in this change. I assume that the assertion would be on the color or background of the child controls, as well as any contrast ratio requirements that should be met. Is there anything else that I should consider?

@KlausLoeffelmann
Copy link
Member

Hey, @willibrandon.

I would like to take reactivate this, test this with other recent patches for DarkMode, and run this to completion.

If you have the time to rebase this, I will wait, if not, I would cherry pick your commits into another PR.

Thanks,

Klaus

@willibrandon
Copy link
Contributor Author

@KlausLoeffelmann Thank you for your interest in moving this forward. I've rebased the branch against main and the builds are passing successfully, as you can see in the pipeline.

Let me know if there's anything else needed from my side to get this across the finish line.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
area-DarkMode Issues relating to Dark Mode feature waiting-author-feedback The team requires more information from the author
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Dark Mode] TabControl is not in dark mode after enabled SystemColorMode.Dark
4 participants