Skip to content

Update App Theme and Interface Style settings pane for 2.3#697

Open
mattsigal wants to merge 1 commit into
Moonfin-Client:mainfrom
mattsigal:feature/app-theme-settings-pane
Open

Update App Theme and Interface Style settings pane for 2.3#697
mattsigal wants to merge 1 commit into
Moonfin-Client:mainfrom
mattsigal:feature/app-theme-settings-pane

Conversation

@mattsigal

Copy link
Copy Markdown
Contributor

Pull Request

Summary

This pull request updates the App Theme and Interface Style settings pane layout, text descriptions, selection borders, focus outlines, and scrolling behavior to align with the visual and accessibility requirements and to highlight the changes coming in 2.3!

Related Issues

Link related issues or tickets separated by commas.

  • Closes #
  • Fixes #
  • Related to #

Type of Change

  • Bug fix
  • New feature
  • Refactor
  • Performance improvement
  • UI/UX update
  • Documentation update
  • Build/CI change
  • Other (describe):

Changes Made

List the key changes included in this PR.

  • app_en.arb: Updated strings for main settings tile, default theme subtitle, custom theme heading/subtitle, and interface style subtitles.
  • appearance_theme_screen.dart: Added ScrollController, auto-scroll to top logic on top button focus, customized list padding, repositioned the subtitle description, and shrank preview card heights to 52.
  • adaptive_segmented.dart: Replaced the SegmentedButton with a custom segment row using custom focus outlines (pink accent border) and selection underlines to match the Details 2.0 styling.

Platform

  • Android
  • iOS
  • tvOS
  • Web
  • macOS
  • Windows
  • Linux
  • All / Shared code

Testing

Describe how this change was tested.

  • Tested on emulator / simulator
  • Tested on physical device
  • Manual testing completed
  • Not tested (explain why):

Test Steps

  1. Install and visit the Settings -> Personalization subpage

Screenshots (if applicable)

Include screenshots or recordings for UI changes.

Original

Shield_Screenshot_2026-07-01_13-36-22

App Theme description

Removes hard-coded theme names also mentions Interface Style.

Shield_Screenshot_2026-07-01_13-55-39

App Theme Pane Update:

Shield_Screenshot_2026-07-01_14-16-38

Checklist

  • Code builds successfully
  • Code follows project style and conventions
  • No unnecessary commented-out code
  • No new warnings introduced

- Modified English localizations in app_en.arb to update main theme tile, custom theme headings/descriptions, default theme subtitle, and interface style descriptions.
- Replaced Material 3 SegmentedButton with custom tab segment row widget in adaptive_segmented.dart to allow independent focus borders (pink outline) and selection underlines (like detail page subtabs).
- Added ScrollController and ancestor Focus listener to ListView in appearance_theme_screen.dart to auto-scroll the viewport back to 0.0 when D-pad focus returns to the segmented buttons.
- Shrunk theme preview gradient heights to 52, centered navigation pills, and reduced typography sizes for compact preview cards.
- Repositioned interface style description before segmented control and adjusted list spacing padding.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant