MudSwitch: Change track color to improve visibility on dark theme

[boukenka]

Description

In a dark theme, with a MudSwitch with no defined Color, the horizontal bar is not visible.

How Has This Been Tested?

This has only been tested visually. Only one css properties have been modified.

Type of Changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• Documentation (fix or improvement to the website or code docs)

Checklist

• The PR is submitted to the correct branch (dev).
• My code follows the code style of this project.
• I've added relevant tests.

[Anu6is]

How does using dark lighten look. Light mode feels a little too light with this change imo.

Any thoughts on this @danielchalmers

[boukenka]

This PR could be connected to Highlighted elements in dark mode using Color.Dark should have a slightly lighter color created by @Yomodo.

[boukenka]

How does using dark lighten look. Light mode feels a little too light with this change imo.

Smh thoughts on this @danielchalmers

@Anu6is Voilà! With --mud-palette-dark-lighten.

[Anu6is]

Hmmmm, not great. Thanks for checking

[boukenka]

I have also tried --mud-palette-gray-light, --mud-palette-gray-lighter and --mud-palette-gray-darker. None of them were Ok.

[boukenka]

I have updated the PR. background-color uses Colors.Gray.Darken1 aka var(--mud-palette-gray-dark). opacity modification only applies when the MudSwitch is disabled.

with the CSS modifications below.

Is it better than the current PR proposal?

[Anu6is]

Yeah, I think I prefer this one.

[boukenka]

Yeah, I think I prefer this one.

Thanks for the feedback. I have updated the PR with this new proposal.

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 91.06%. Comparing base (68a2118) to head (1492c50).
Report is 8 commits behind head on dev.

Additional details and impacted files

@@           Coverage Diff           @@
##              dev   #11077   +/-   ##
=======================================
  Coverage   91.05%   91.06%           
=======================================
  Files         429      429           
  Lines       13965    13999   +34     
  Branches     2698     2706    +8     
=======================================
+ Hits        12716    12748   +32     
  Misses        646      646           
- Partials      603      605    +2     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 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.

[Garderoben]

Ýour screenshots are from docs, please note that docs and mudblazor itself have different dark themes.
Also note that the trackitself has both color and opacity here.

I dont know why the switch is using black here, was it changed? pretty sure it should use one of the action colors, example:
--mud-palette-action-default

[boukenka]

Ýour screenshots are from docs, please note that docs and mudblazor itself have different dark themes. Also note that the trackitself has both color and opacity here.

With a default Blazor Web App and not from the docs.

<div class="d-flex">
    <MudSwitch @bind-Value="Basic_Switch1" />
    <MudSwitch @bind-Value="Basic_Switch2" Color="Color.Primary" />
    <MudSwitch @bind-Value="Basic_Switch3" Color="Color.Secondary" />
    <MudSwitch T="bool" Disabled="true" />
</div>
<div class="d-flex mt-2">
    <MudSwitch @bind-Value="Basic_Switch4" Color="Color.Success" UncheckedColor="Color.Error" />
    <MudSwitch @bind-Value="Basic_Switch5" Color="Color.Primary" UncheckedColor="Color.Secondary" />
    <MudSwitch @bind-Value="Basic_Switch6" Color="Color.Info" UncheckedColor="Color.Warning" />
    <MudSwitch T="bool" Disabled="true" UncheckedColor="Color.Default" />
</div>

@code {
    public bool Basic_Switch1 { get; set; } = false;
    public bool Basic_Switch2 { get; set; } = true;
    public bool Basic_Switch3 { get; set; } = true;
    public bool Basic_Switch4 { get; set; } = false;
    public bool Basic_Switch5 { get; set; } = true;
    public bool Basic_Switch6 { get; set; } = true;
}

[boukenka]

I dont know why the switch is using black here, was it changed? pretty sure it should use one of the action colors, example: --mud-palette-action-default

Today, below is the current definition for mud-switch-track.

[boukenka]

B) Here is the result with background-color: var(--mud-palette-action-default); and opacity: 0.4 !important;

C) Here is the result with background-color: var(--mud-palette-action-default); and opacity: 0.12 !important; (original value).

@Garderoben What do you think? Which solution do you prefer ? The PR, B or C? Or none of them ?

[Garderoben]

B) Here is the result with background-color: var(--mud-palette-action-default); and opacity: 0.4 !important;

C) Here is the result with background-color: var(--mud-palette-action-default); and opacity: 0.12 !important; (original value).

@Garderoben What do you think? Which solution do you prefer ? The PR, B or C? Or none of them ?

Now its looking way better! i vote for C @danielchalmers what about you?

[Anu6is]

I agree with C as well.

[boukenka]

Thank you for your feedback. PR updated with C solution. Ready to update if @danielchalmers has a different opinion.

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[danielchalmers]

Looks great on both light and dark + more consistent with other inputs

[danielchalmers]

Thank you!