Skip to content

Conversation

@Olipro
Copy link
Contributor

@Olipro Olipro commented Oct 29, 2025

Previously, the import/export icons were not correctly tinted when the Android OS was set to dark mode.

To correct this, the icons no longer use a hard-coded fill colour and an iconTint property is applied in order to leverage the built-in support that Chromium has for automatically adjusting icons for light/dark mode.

Resolves brave/brave-browser#50232

@github-actions
Copy link
Contributor

The security team is monitoring all repositories for certain keywords. This PR includes the word(s) "password" and so security team members have been added as reviewers to take a look.

No need to request a full security review at this stage, the security team will take a look shortly and either clear the label or request more information/changes.

Notifications have already been sent, but if this is blocking your merge feel free to reach out directly to the security team on Slack so that we can expedite this check.

@Olipro
Copy link
Contributor Author

Olipro commented Oct 29, 2025

Previews:
image

image

@Olipro Olipro requested a review from a team October 29, 2025 16:59
@Olipro Olipro added CI/skip-ios Do not run CI builds for iOS CI/skip-windows-x64 Do not run CI builds for Windows x64 CI/skip-macos-arm64 Do not run CI builds for macOS arm64 CI/skip-origin Do not run CI builds for Origin release-notes/exclude labels Oct 29, 2025
@Olipro
Copy link
Contributor Author

Olipro commented Oct 29, 2025

@aguscruiz @fallaciousreasoning - Would either of you mind giving the diff a quick check to see if the colours are as expected? If not, let me know what to change to.

@aguscruiz
Copy link
Collaborator

Looks ok to me, would you mind also posting a screenshot on how it looks when dynamic theming colors are enabled?

@aguscruiz
Copy link
Collaborator

Unrelated, I see the icons being used are from material design icons. The figma file has the correct icons to use.
https://www.figma.com/design/vHUet2idQQeyhANlnLaaOJ/Import-passwords?node-id=1-2

image

@Olipro
Copy link
Contributor Author

Olipro commented Oct 29, 2025

Looks ok to me, would you mind also posting a screenshot on how it looks when dynamic theming colors are enabled?

@aguscruiz a rather trivial question: How would I configure this on a Google Pixel 10 device in order to test it?

@fallaciousreasoning
Copy link
Contributor

Enable chrome://brave-android-dynamic-colors and then change the OS theme 😄

@aguscruiz
Copy link
Collaborator

Enable chrome://brave-android-dynamic-colors and then change the OS theme 😄

This, and you'll notice the different parts of the browser will be tinted depending on your Android color themes

@Olipro
Copy link
Contributor Author

Olipro commented Oct 29, 2025

resolved on Slack

Previously, the import/export icons were not correctly tinted when the
Android OS was set to dark mode.

To correct this, the icons no longer use a hard-coded fill colour and an
iconTint property is applied in order to leverage the built-in support
that Chromium has for automatically adjusting icons for light/dark mode.

The icons have also been replaced with the upload/download SVG paths
from the brave/leo repo.

Resolves brave/brave-browser#50232
@Olipro Olipro force-pushed the Android_ApplyTintingToPasswordImportExportIconsForDarkMode branch from 14504f5 to 4372848 Compare October 29, 2025 20:35
@Olipro Olipro enabled auto-merge (squash) October 29, 2025 20:36
@Olipro Olipro merged commit cd655bf into master Oct 29, 2025
19 checks passed
@Olipro Olipro deleted the Android_ApplyTintingToPasswordImportExportIconsForDarkMode branch October 29, 2025 22:06
@github-actions github-actions bot added this to the 1.86.x - Nightly milestone Oct 29, 2025
brave-builds added a commit that referenced this pull request Oct 29, 2025
@brave-builds
Copy link
Collaborator

Released in v1.86.22

@hffvld
Copy link
Collaborator

hffvld commented Oct 30, 2025

Verified on Pixel 6 using version(s):

Device/OS: Pixel 6 / oriole-user 15 BP1A.250505.005 release-keys
Brave build: 1.86.22 
Chromium: 142.0.7444.60 (Official Build) canary (64-bit)

STEPS:

  1. Follow the STR/TP from [Follow-up to #35729] Import and Export icons don't respect device Dark mode brave-browser#50232 (comment) and [Android] Apply tinting for Import/Export password manager icons #32099 (comment)
  2. Verify

ACTUAL RESULTS:

  • Verified that Import passwords and Export passwords icons are shown properly in Dark mode and Light mode.
  • Verified that Import passwords and Export passwords icons use correct design from Figma

1 2
1 2

kjozwiak pushed a commit that referenced this pull request Oct 31, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

CI/skip-ios Do not run CI builds for iOS CI/skip-macos-arm64 Do not run CI builds for macOS arm64 CI/skip-origin Do not run CI builds for Origin CI/skip-windows-x64 Do not run CI builds for Windows x64 release-notes/exclude

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Follow-up to #35729] Import and Export icons don't respect device Dark mode

9 participants