Skip to content

Improve tab bar color contrast in light and dark modes #55

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Oct 18, 2025
Merged

Improve tab bar color contrast in light and dark modes #55

Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
31b2270
feat: improve tab bar color contrast in light and dark modes
graycreate Oct 18, 2025
e743785
fix: improve tab bar color configuration using SwiftUI modifiers
graycreate Oct 18, 2025
a8496cf
fix: simplify tab bar color configuration with accentColor
graycreate Oct 18, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 31 additions & 0 deletions V2er/View/MainPage.swift
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,37 @@ struct MainPage: StateView {
store.appState.feedState.feedInfo.unReadNums
}

init() {
// Configure TabBar appearance for better contrast in both light and dark modes
let appearance = UITabBarAppearance()
appearance.configureWithDefaultBackground()

// Set tint color for selected items
// Light Mode: deep/dark color (from Color.tintColor)
// Dark Mode: white (from Color.tintColor)
Copy link

Copilot AI Oct 18, 2025

Choose a reason for hiding this comment

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

[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.

Copilot uses AI. Check for mistakes.
UITabBar.appearance().tintColor = UIColor(Color.tintColor)

// Set color for unselected items with subtle difference from selected
// Light mode: selected = dark color, unselected = slightly lighter dark color (60% opacity)
// Dark mode: selected = white, unselected = slightly dimmed white (60% opacity)
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)
}
}
Comment on lines 30 to 39
Copy link

Copilot AI Oct 18, 2025

Choose a reason for hiding this comment

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

[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

Copilot uses AI. Check for mistakes.
UITabBar.appearance().unselectedItemTintColor = unselectedColor

UITabBar.appearance().standardAppearance = appearance
if #available(iOS 15.0, *) {
UITabBar.appearance().scrollEdgeAppearance = appearance
}
}

// Create an intermediate binding that captures all tab selections
// This is the proper SwiftUI way to detect same-tab taps without UIKit
private var tabSelection: Binding<TabId> {
Expand Down
Loading