Improve dark mode for profiles screen#137
Conversation
# Conflicts: # app/src/main/res/values-night/colors.xml
…cessibility" This reverts commit a659c1c.
Improves the color contrast and accessibility of the profile cards in dark mode by applying a theme overlay. This ensures all buttons render correctly with proper contrast.
📝 WalkthroughWalkthroughUpdates the profile list item layout with new card theming, reorganized view constraints, and button styling. Adds color resources for light and dark themes to support the updated card background styling. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~12 minutes Poem
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches🧪 Generate unit tests (beta)
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. Comment |
There was a problem hiding this comment.
Pull request overview
This PR aims to improve dark-mode contrast/accessibility on the Profiles screen by introducing dedicated profile card/background colors and applying a MaterialComponents dark theme overlay to the profile card so Material buttons render with appropriate contrast.
Changes:
- Add new
profile_backgroundandprofile_card_backgroundcolor resources for day/night. - Introduce
Theme.NetBird.Card(night variant) based onThemeOverlay.MaterialComponents.Dark. - Update
list_item_profile.xmlto apply the card theme overlay, set the card background color, and use Material button styles.
Reviewed changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 3 comments.
| File | Description |
|---|---|
| app/src/main/res/values/colors.xml | Adds default (day) colors for profile background and card background. |
| app/src/main/res/values-night/colors.xml | Adds night colors for profile background and card background. |
| app/src/main/res/values-night/themes.xml | Adds Theme.NetBird.Card style in the night configuration. |
| app/src/main/res/layout/list_item_profile.xml | Applies the new card theme + background color and updates button styling/ordering. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| android:layout_width="match_parent" | ||
| android:layout_height="wrap_content" | ||
| android:layout_margin="8dp" | ||
| android:theme="@style/Theme.NetBird.Card" |
There was a problem hiding this comment.
android:theme references @style/Theme.NetBird.Card, but that style is only defined in values-night/themes.xml. In light mode this style won't resolve at runtime (and can also break resource linking), causing the profile list item to fail to inflate. Add a non-night definition of Theme.NetBird.Card in app/src/main/res/values/themes.xml (likely using a light/neutral ThemeOverlay), keeping the dark parent only in the values-night variant.
| android:theme="@style/Theme.NetBird.Card" |
| app:layout_constraintBottom_toBottomOf="@+id/icon_profile" | ||
| app:layout_constraintEnd_toStartOf="@id/badge_active" | ||
| app:layout_constraintHorizontal_bias="0" | ||
| app:layout_constraintHorizontal_chainStyle="packed" /> | ||
| app:layout_constraintHorizontal_chainStyle="packed" | ||
| app:layout_constraintStart_toEndOf="@id/icon_profile" | ||
| app:layout_constraintTop_toTopOf="@+id/icon_profile" |
There was a problem hiding this comment.
Constraint references use @+id/icon_profile even though the id is already declared on the ImageView. Prefer @id/icon_profile for references to avoid creating/looking like a new id and to prevent lint warnings.
| app:layout_constraintBottom_toBottomOf="@+id/icon_profile" | ||
| app:layout_constraintEnd_toEndOf="parent" | ||
| app:layout_constraintHorizontal_bias="0" /> | ||
| app:layout_constraintHorizontal_bias="0" | ||
| app:layout_constraintStart_toEndOf="@id/text_profile_name" | ||
| app:layout_constraintTop_toTopOf="@+id/icon_profile" |
There was a problem hiding this comment.
Same as above: use @id/icon_profile instead of @+id/icon_profile when constraining badge_active to icon_profile to avoid lint warnings and keep id usage consistent.
![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
🤖 Fix all issues with AI agents
In `@app/src/main/res/values-night/themes.xml`:
- Around line 60-61: Theme.NetBird.Card is only defined for night mode and is
referenced by list_item_profile.xml, causing crashes in light mode; add a
day-mode definition for Theme.NetBird.Card in the app's day themes resource
(values/themes.xml) mirroring the night variant but inheriting from
ThemeOverlay.MaterialComponents.Light so the style resolves during layout
inflation. Ensure the new entry uses the exact style name "Theme.NetBird.Card"
and parent "ThemeOverlay.MaterialComponents.Light" to match usage in
list_item_profile.xml and the existing night definition.
🧹 Nitpick comments (2)
app/src/main/res/values-night/colors.xml (1)
29-30: New profile colors duplicate existing values.
profile_background(#181A1D) is identical tonb_bg, andprofile_card_background(#32363D) is identical tonb_gray_light. Consider referencing the existing colors (e.g.,@color/nb_bg) to avoid drift, unless you intentionally want these to evolve independently.app/src/main/res/layout/list_item_profile.xml (1)
36-44: HardcodedtextColor,textSize, andtextStyleon the profile name.These attributes are set directly on the view rather than via a
TextAppearancestyle. This works but means any future typography changes must be applied in every layout file that uses similar headings. Consider extracting a reusable text appearance style if this pattern is used in multiple places.
This PR improves the color contrast and accessibility of the profile cards in dark mode.
A ThemeOverlay.MaterialComponents.Dark theme overlay is now applied to the cards, which ensures all buttons render with proper contrast and makes the UI more accessible and user-friendly.
Summary by CodeRabbit
Release Notes