Skip to content

fix(komodo_ui): use textTheme colors for dropdown text styling#303

Open
CharlVS wants to merge 5 commits intodevfrom
fix/wallet-pr-onsurface-color-scheme
Open

fix(komodo_ui): use textTheme colors for dropdown text styling#303
CharlVS wants to merge 5 commits intodevfrom
fix/wallet-pr-onsurface-color-scheme

Conversation

@CharlVS
Copy link
Copy Markdown
Collaborator

@CharlVS CharlVS commented Dec 10, 2025

Summary

Fixes dropdown text color visibility issues by using textTheme colors instead of colorScheme.onSurface. Some themes misuse onSurface as a background color, causing text to be invisible or hard to read in dropdown menus.

Changes

search_coin_select.dart

  • Use theme.textTheme.bodyMedium instead of theme.listTileTheme.titleTextStyle for consistent text styling

searchable_select.dart

  • Add fallback text color logic that uses textTheme.bodyLarge?.color with appropriate brightness fallback
  • Update DefaultSelectedItemView to safely access text styles with null checks
  • Update SelectItemWidget to use safe text style access
  • Improve code formatting for better readability

Why

The colorScheme.onSurface property is intended to be the color that contrasts with the surface color. However, some custom themes incorrectly configure this value, leading to poor text visibility. Using textTheme colors provides a more reliable text color that respects the theme's intended design.

ca333 and others added 5 commits November 13, 2025 11:40
chore: release v0.9.4 - GLEEC rebrand and KDF v2.6.0
Updated searchable_select.dart to:
- Use text color from textTheme instead of colorScheme.onSurface which
  is misused as a background color in some consuming apps
- Add null safety fallbacks for textTheme.bodyLarge to prevent potential
  crashes when the text style is null

This ensures dropdown items display with correct text contrast regardless
of how the consuming app configures onSurface.
Copilot AI review requested due to automatic review settings December 10, 2025 23:14
Copy link
Copy Markdown
Contributor

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.

Pull request overview

This PR addresses text visibility issues in dropdown components by updating the text color strategy. The core change implements a fallback mechanism that uses textTheme colors instead of relying on colorScheme.onSurface, which some themes incorrectly configure as a background color.

Key changes:

  • Introduced text color fallback logic in _DropdownItemWidget using textTheme.bodyLarge?.color with brightness-based defaults
  • Added null safety checks for text styles in DefaultSelectedItemView and SelectItemWidget
  • Changed search_coin_select.dart to use textTheme.bodyMedium instead of listTileTheme.titleTextStyle

Note: While the PR improves null safety and introduces the new text color pattern in _DropdownItemWidget, the implementation is incomplete. Both DefaultSelectedItemView (line 305) and SelectItemWidget (line 754) still use theme.colorScheme.onSurface directly, which doesn't fully address the stated problem.

Reviewed changes

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

File Description
searchable_select.dart Adds text color fallback logic in _DropdownItemWidget, improves null safety in text style access, and reformats code for consistency
search_coin_select.dart Changes coin name text styling from listTileTheme.titleTextStyle to textTheme.bodyMedium for consistency

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

style: theme.textTheme.bodyLarge!.copyWith(
color: theme.colorScheme.onSurface,
),
style: textStyle.copyWith(color: theme.colorScheme.onSurface),
Copy link

Copilot AI Dec 10, 2025

Choose a reason for hiding this comment

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

The text color is still using theme.colorScheme.onSurface instead of the new approach with textTheme colors and brightness fallback. This is inconsistent with the changes in _DropdownItemWidget (lines 407-414) and doesn't fully address the stated problem of themes misusing onSurface as a background color.

Copilot uses AI. Check for mistakes.
style: theme.textTheme.bodyLarge!.copyWith(
color: theme.colorScheme.onSurface,
),
style: textStyle.copyWith(color: theme.colorScheme.onSurface),
Copy link

Copilot AI Dec 10, 2025

Choose a reason for hiding this comment

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

The text color is still using theme.colorScheme.onSurface instead of the new approach with textTheme colors and brightness fallback that was introduced in _DropdownItemWidget (lines 407-414). This is inconsistent and doesn't fully address the stated problem of themes misusing onSurface as a background color.

Suggested change
style: textStyle.copyWith(color: theme.colorScheme.onSurface),
style: textStyle.copyWith(
color: textStyle.color ??
(theme.brightness == Brightness.dark
? Colors.white
: Colors.black),
),

Copilot uses AI. Check for mistakes.
@github-actions
Copy link
Copy Markdown
Contributor

Visit the preview URL for this PR (updated for commit c90936b):

https://komodo-playground--pr303-fix-wallet-pr-onsurf-n5knox8t.web.app

(expires Wed, 17 Dec 2025 23:20:55 GMT)

🔥 via Firebase Hosting GitHub Action 🌎

Sign: 2bfedd77fdea45b25ba7c784416e81f177aa5c47

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants