Use different NTP tile bg color based on theme

[simonhong]

fix: brave/brave-browser#14453

Resolves

Submitter Checklist:

• I confirm that no security/privacy review is needed, or that I have requested one
• There is a ticket for my issue
• Used Github auto-closing keywords in the PR description above
• Wrote a good PR/commit description
• Added appropriate labels (QA/Yes or QA/No; release-notes/include or release-notes/exclude; OS/...) to the associated issue
• Checked the PR locally: npm run test -- brave_browser_tests, npm run test -- brave_unit_tests, npm run lint, npm run gn_check, npm run tslint
• Ran git rebase master (if needed)

Reviewer Checklist:

• A security review is not needed, or a link to one is included in the PR description
• New files have MPL-2.0 license header
• Adequate test coverage exists to prevent regressions
• Major classes, functions and non-trivial code blocks are well-commented
• Changes in component dependencies are properly reflected in gn
• Code follows the style guide
• Test plan is specified in PR before merging

After-merge Checklist:

• The associated issue milestone is set to the smallest version that the
  changes has landed on
• All relevant documentation has been updated, for instance:
  • https://github.com/brave/brave-browser/wiki/Deviations-from-Chromium-(features-we-disable-or-remove)
  • https://github.com/brave/brave-browser/wiki/Proxy-redirected-URLs
  • https://github.com/brave/brave-browser/wiki/Fingerprinting-Protections
  • https://github.com/brave/brave-browser/wiki/Brave%E2%80%99s-Use-of-Referral-Codes
  • https://github.com/brave/brave-browser/wiki/Custom-Headers
  • https://github.com/brave/brave-browser/wiki/Web-Compatibility-Exceptions-in-Brave
  • https://github.com/brave/brave-browser/wiki/QA-Guide
  • https://github.com/brave/brave-browser/wiki/P3A

Test Plan:

1. Launch browser with clean profile
2. Set current theme as Light
3. Load github.com
4. Check NTP tile bg is white and github favicon is visible
5. Set current theme as Dark
6. Check NTP tile bg is changed to black
7. Load github.com
8. Load NPT and check NTP github favicon is visible

[bsclifton]

Interesting situation - I had default (light) profile and GitHub was added to most visited. Then I changed theme to dark and the icons look like this:

However - after visiting again, it looks like it should 😄 So definitely an improvement

[simonhong]

@bsclifton To get proper favicon for current theme, that site should be loaded again :)
Nice pics for comparison!

[bsclifton]

Agreed - there's no way we can show a perfect icon, unless the site is serving a better one. The proposed fix looks great to me 😄 @karenkliu what do you think about the color of the tile itself?

[simonhong]

That color is @karenkliu 's pick - https://github.com/brave/brave-ui/blob/master/src/theme/colors/index.tsx#L9 :) - #1E2029
https://bravesoftware.slack.com/archives/C7TG12KC3/p1616548979002100?thread_ts=1616511324.000700&cid=C7TG12KC3

[bsclifton]

LGTM! 😄

[simonhong]

Merged because only unrelated audit step is failed.