Modernize Settings selection controls to Material 3#100
Merged
Conversation
The Light/Dark/System theme picker becomes a segmented button matching the home screen's toggle groups, and Hide Today's notes becomes an M3 switch in a list row with the label leading and the control trailing. Switches across the app (Settings and the category manager) restyle to the M3 shape: a 52x32 outlined pill track with solid colors instead of translucent overlays, and a thumb that grows from 16 to 24px when checked. The row layout rule is scoped to the label element because MudSwitch reuses its class on the inner text span.
Both pages adopt the grouped-list pattern the home timeline already uses: every setting or category becomes its own tonal row with small gaps, and the first and last rows carry the large group radius. The theme picker gets a titled row, and the About section splits into individual rows per item. The flat single-card sections are gone.
The span size and track rules were single-class selectors, so MudBlazor's .mud-switch-span-medium.mud-switch-span and .mud-switch-span .mud-switch-track rules outranked them, leaving the M2 58x38 padded span and skinny translucent action-default track in place; only the color and thumb rules were winning, which made unchecked switches render as dark blobs hanging off a gray sliver. The overrides now match those compound selectors exactly.
The thumb carrier resizes with the thumb, so a fixed top offset sat the off thumb 2px high and the on thumb 2px low; it now centers with a transform in both states. The slide distance lands the thumb at the spec insets: 8px from the left edge when off, 4px from the right when on. Verified numerically against the live layout.
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
1 participant
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.
Settings page plus the shared switch styling: