Improve dark mode for profiles screen #137

Sickjuicy · 2026-02-07T14:23:52Z

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

Style
- Redesigned the profile card layout with refined constraints, improved button organization, and enhanced visual hierarchy for better usability.
- Updated text and icon styling for improved readability and visual presentation.
- Added full dark mode support with dedicated color palette and theme styling for consistent appearance across all modes.

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

coderabbitai · 2026-02-07T14:24:11Z

📝 Walkthrough

Walkthrough

Updates 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

Cohort / File(s)	Summary
Profile Layout Styling `app/src/main/res/layout/list_item_profile.xml`	Reorganized view constraints and styling; added card theming via `Theme.NetBird.Card` and background color; reordered ImageView, text_profile_name, and badge_active constraints; updated button styling (btn_switch, btn_logout, btn_remove) with TextButton style and horizontal chain constraints.
Light Theme Colors `app/src/main/res/values/colors.xml`	Added `profile_background` (`#F2F2F2`) and `profile_card_background` (`@color/white`) color resources.
Dark Theme Resources `app/src/main/res/values-night/colors.xml`, `app/src/main/res/values-night/themes.xml`	Added `profile_background` (`#181A1D`) and `profile_card_background` (`#32363D`) colors; introduced `Theme.NetBird.Card` style with `ThemeOverlay.MaterialComponents.Dark` parent.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Poem

🐰 The profile card gets dressed up fine,
With colors dark and light to shine,
Constraints all neat, buttons aligned,
A themed design, thoughtfully lined!
✨

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately reflects the main objective of the PR, which is to improve dark mode support for the profiles screen by applying theme overlays and adding color resources.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment

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.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

Copilot

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_background and profile_card_background color resources for day/night.
Introduce Theme.NetBird.Card (night variant) based on ThemeOverlay.MaterialComponents.Dark.
Update list_item_profile.xml to 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.

Copilot · 2026-02-07T14:26:48Z

app/src/main/res/layout/list_item_profile.xml

    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="8dp"
+    android:theme="@style/Theme.NetBird.Card"


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.

Suggested change

android:theme="@style/Theme.NetBird.Card"

Copilot · 2026-02-07T14:26:49Z

app/src/main/res/layout/list_item_profile.xml

+            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"


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.

Copilot · 2026-02-07T14:26:49Z

app/src/main/res/layout/list_item_profile.xml

+            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"


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

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 to nb_bg, and profile_card_background (#32363D) is identical to nb_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: Hardcoded textColor, textSize, and textStyle on the profile name.

These attributes are set directly on the view rather than via a TextAppearance style. 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.

coderabbitai · 2026-02-07T14:27:15Z

app/src/main/res/values-night/themes.xml

+
+    <style name="Theme.NetBird.Card" parent="ThemeOverlay.MaterialComponents.Dark" />


⚠️ Potential issue | 🔴 Critical

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash # Check if Theme.NetBird.Card is defined in the day (non-night) themes file echo "=== Searching for Theme.NetBird.Card in values/themes.xml ===" fd "themes.xml" --full-path --glob '**/values/themes.xml' --exec cat {} echo "" echo "=== All files defining Theme.NetBird.Card ===" rg -rn "Theme.NetBird.Card" --type=xml

Repository: netbirdio/android-client

Length of output: 486

🏁 Script executed:

#!/bin/bash # Read the night themes file echo "=== Content of values-night/themes.xml ===" cat -n app/src/main/res/values-night/themes.xml echo "" echo "=== Check if day themes file exists ===" find app/src/main/res -name "themes.xml" -type f echo "" echo "=== Content of day themes file (if exists) ===" cat -n app/src/main/res/values/themes.xml 2>/dev/null || echo "File not found"

Repository: netbirdio/android-client

Length of output: 6376

🏁 Script executed:

#!/bin/bash # Check if Theme.NetBird.Card is referenced anywhere echo "=== Searching for references to Theme.NetBird.Card ===" rg "Theme\.NetBird\.Card" -t xml -t java -t kotlin echo "" echo "=== Searching for numeric references to the style ===" rg "@style/Theme\.NetBird\.Card" -t xml

Repository: netbirdio/android-client

Length of output: 488

Add Theme.NetBird.Card definition to values/themes.xml (day theme)

Theme.NetBird.Card is defined only in values-night/themes.xml but is actively used in app/src/main/res/layout/list_item_profile.xml. The app will crash at layout inflation time in light mode because the style cannot be resolved from values/themes.xml.

Add the following to values/themes.xml:

Day theme style definition

<style name="Theme.NetBird.Card" parent="ThemeOverlay.MaterialComponents.Light" />

🤖 Prompt for AI Agents

In `@app/src/main/res/values-night/themes.xml` around lines 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.

Sickjuicy and others added 24 commits July 8, 2025 21:46

Add theme selection feature in advanced settings and WIP Darkmode

87dcd88

Add new XML resources for themes, colors, and shapes

7d7e7f6

Add new XML resources for themes, colors, and shapes

d134a71

Merge branch 'netbirdio:main' into main

408eed4

Add new color resources and update layouts for improved theming

91e6d68

Merge remote-tracking branch 'origin/main'

7384e8a

Add dark mode support for button animations and update UI colors

95eba4c

Merge branch 'netbirdio:main' into main

ece11d3

Merge branch 'netbirdio:main' into main

5bbaa57

Merge branch 'netbirdio:main' into main

8d6bb94

Refactor UI colors and styles for improved consistency and accessibility

67976bd

Refactor UI colors and styles for improved consistency and accessibility

a659c1c

Changed Color

513e829

Added color variable

11cceff

Update tab background color reference in fragment_bottom_dialog.xml

0cacfd6

Merge remote-tracking branch 'origin/main'

1cbe974

# Conflicts: # app/src/main/res/values-night/colors.xml

Add colorSurface and nbTabBackground to themes.xml for button styling

5e4f1a5

Update colorSurface to use white for button background in themes.xml

4913cb6

Revert "Refactor UI colors and styles for improved consistency and ac…

8299be0

…cessibility" This reverts commit a659c1c.

reverted submodule commit

0963bcf

Update netbird submodule to v0.54.1

eb2b4d6

Merge branch 'netbirdio:main' into main

991f2f1

Merge branch 'netbirdio:main' into main

642dc3e

feat(ui): Improve dark mode for profiles screen

00f3321

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.

Copilot AI review requested due to automatic review settings February 7, 2026 14:23

Copilot started reviewing on behalf of Sickjuicy February 7, 2026 14:24 View session

Copilot AI reviewed Feb 7, 2026

View reviewed changes

coderabbitai bot reviewed Feb 7, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Improve dark mode for profiles screen #137

Improve dark mode for profiles screen #137

Sickjuicy commented Feb 7, 2026 •

edited by coderabbitai bot

Loading

Uh oh!

coderabbitai bot commented Feb 7, 2026 •

edited

Loading

Walkthrough

Changes

Estimated code review effort

Poem

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Feb 7, 2026

Uh oh!

Copilot AI Feb 7, 2026

Uh oh!

Copilot AI Feb 7, 2026

Uh oh!

coderabbitai bot left a comment

Uh oh!

coderabbitai bot Feb 7, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant


		<style name="Theme.NetBird.Card" parent="ThemeOverlay.MaterialComponents.Dark" />

Improve dark mode for profiles screen #137

Are you sure you want to change the base?

Improve dark mode for profiles screen #137

Conversation

Sickjuicy commented Feb 7, 2026 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Release Notes

Uh oh!

coderabbitai bot commented Feb 7, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Poem

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Feb 7, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 7, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 7, 2026

Choose a reason for hiding this comment

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

coderabbitai bot Feb 7, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Sickjuicy commented Feb 7, 2026 •

edited by coderabbitai bot

Loading

coderabbitai bot commented Feb 7, 2026 •

edited

Loading