Improve tab bar color contrast in light and dark modes #55
+18
−0
Conversation
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
Update tab bar unselected item color from 40% to 60% opacity for better contrast and visibility in both light and dark modes. Changes: - Light mode: selected uses dark color, unselected uses 60% opacity dark (was 40%) - Dark mode: selected uses white, unselected uses 60% opacity white (was 40%) The subtle difference (100% vs 60%) provides better visual feedback while maintaining a clean, modern look consistent with iOS design patterns. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
There was a problem hiding this comment.
Pull Request Overview
This PR improves the visual accessibility of the tab bar by increasing the opacity of unselected tab items from 40% to 60% for better contrast in both light and dark modes. The change maintains the clean iOS aesthetic while making unselected tabs more visible to users.
Key Changes:
- Added initialization code to configure UITabBar appearance
- Increased unselected item opacity from 40% to 60% for better visibility
- Implemented dynamic color adaptation for light and dark interface styles
V2er/View/MainPage.swift
Outdated
Comment on lines
32
to
34
| // Set tint color for selected items | ||
| // Light Mode: deep/dark color (from Color.tintColor) | ||
| // Dark Mode: white (from Color.tintColor) |
There was a problem hiding this comment.
[nitpick] Consider documenting what Color.tintColor represents or referencing it in the comment. The current comment mentions 'deep/dark color' and 'white' but doesn't clarify that this comes from the app's tint color configuration.
Suggested change
| // Set tint color for selected items | |
| // Light Mode: deep/dark color (from Color.tintColor) | |
| // Dark Mode: white (from Color.tintColor) | |
| // Set tint color for selected tab bar items. | |
| // The color is taken from the app's tint color configuration (Color.tintColor). | |
| // In Light Mode, this is typically a deep/dark color; in Dark Mode, it is typically white. |
Comment on lines
40
to
49
| let unselectedColor = UIColor { traitCollection in | ||
| switch traitCollection.userInterfaceStyle { | ||
| case .dark: | ||
| // Dark mode: slightly dimmed white (60% opacity for subtle difference) | ||
| return UIColor.white.withAlphaComponent(0.6) | ||
| default: | ||
| // Light mode: slightly lighter dark color (60% opacity for subtle difference) | ||
| return UIColor.black.withAlphaComponent(0.6) | ||
| } | ||
| } |
There was a problem hiding this comment.
[nitpick] Consider extracting the opacity value (0.6) as a named constant to make it easier to adjust and maintain consistency. For example: private static let unselectedTabOpacity: CGFloat = 0.6
Code Coverage Report ❌Current coverage: 0% |
Fix tab bar colors by using proper SwiftUI approach instead of UIKit appearance APIs: - Use .tint(Color.primary) for selected items (auto-adapts to light/dark mode) - Set appearance.stackedLayoutAppearance for unselected text colors - Remove UITabBar.appearance().tintColor to fix dark mode color reversal Light mode: selected=black, unselected=light gray (78%) Dark mode: selected=white, unselected=dim gray (60%) Text colors now work correctly, icon colors need further fix. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
Simplify the tab bar color implementation: - Use UITabBar.appearance().unselectedItemTintColor for unselected items (both icons and text) - Use .accentColor(Color.primary) modifier on TabView for selected items - Remove complex UITabBarAppearance layout configurations This simpler approach should properly apply colors to both icons and text: - Light mode: selected=black, unselected=light gray (78%) - Dark mode: selected=white, unselected=dim gray (60%) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
Code Coverage Report ❌Current coverage: 0% |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
Summary
Improve tab bar icon contrast by adjusting the unselected item opacity from 40% to 60% for better visibility in both light and dark modes.
Changes
Color Adjustments
Light Mode:
Dark Mode:
Benefits
Technical Details
UITabBar.appearance().unselectedItemTintColorin MainPage initstandardAppearanceandscrollEdgeAppearanceTesting
Before vs After
Before: 40% opacity made unselected tabs too faint, hard to see at a glance
After: 60% opacity provides clear visual feedback while maintaining elegance
🤖 Generated with Claude Code