improve text contrast for inactive tabs in dark mode #374
Conversation
WalkthroughThe change updates the Changes
Possibly related issues
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
lib/ui/views/profile/profile_view.dart(1 hunks)
🔇 Additional comments (1)
lib/ui/views/profile/profile_view.dart (1)
176-176: Verify contrast in both light and dark modes.
Before merging, ensure the updated color maintains sufficient contrast on light backgrounds as well. Add a widget test or manual QA checklist to validate unselected tab labels across themes.
| tabBar: const TabBar( | ||
| labelColor: Colors.white, | ||
| unselectedLabelColor: Colors.black87, | ||
| unselectedLabelColor: Colors.white, |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Use theme-based unselectedLabelColor instead of hard-coded white.
Hard-coding Colors.white prevents dynamic theming and may break in light mode. Remove the const on the TabBar and derive the unselected label color from the current theme (for example, Theme.of(context).tabBarTheme.unselectedLabelColor or via a brightness check).
🤖 Prompt for AI Agents
In lib/ui/views/profile/profile_view.dart at line 176, replace the hard-coded
unselectedLabelColor value Colors.white with a theme-based color. Remove the
const modifier from the TabBar widget and set unselectedLabelColor to
Theme.of(context).tabBarTheme.unselectedLabelColor or determine the color
dynamically based on the current theme's brightness to support dynamic theming
and avoid issues in light mode.
|
Hey @sahu-virendra-1908 , Please pull the latest commit of the repo to make new changes as we updated the flutter version. |
2 participants
Describe the bug
In dark mode, the text on inactive tabs (e.g., "Circuits") within the profile screen has insufficient contrast, making it difficult to read.
To Reproduce
Steps to reproduce the behavior:
Switch to dark mode.
Navigate to the profile screen.
Click on any inactive tab (like "Circuits").
Observe that the inactive tab's text is hard to read due to low contrast.
Expected behavior
The inactive tab text should maintain sufficient contrast against the dark background to ensure readability.
[Dark Mode UI Issue] Inactive Tab Text Lacks Contrast and is Difficult to Read #317
Describe the changes you have made in this PR
Updated the unselectedLabelColor in lib/ui/views/profile/profile_view.dart from Colors.black87 to Colors.white to ensure better text visibility in dark mode.
Screenshots
after changes
Summary by CodeRabbit