From c08cf3f3c3f9fd08f6bff82ffe67cf9914f46e58 Mon Sep 17 00:00:00 2001
From: Simon Hong <shong@brave.com>
Date: Wed, 24 Mar 2021 11:02:17 +0900
Subject: [PATCH] Use different NTP tile bg color based on theme

fix: https://github.com/brave/brave-browser/issues/14453
---
 .../brave_new_tab_ui/components/default/gridSites/index.ts  | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/components/brave_new_tab_ui/components/default/gridSites/index.ts b/components/brave_new_tab_ui/components/default/gridSites/index.ts
index 5fbb3863d16f..337c1b0de446 100644
--- a/components/brave_new_tab_ui/components/default/gridSites/index.ts
+++ b/components/brave_new_tab_ui/components/default/gridSites/index.ts
@@ -183,7 +183,6 @@ export const TileAction = styled('button')<{}>`
 `
 
 export const TileFavicon = styled('img')<{}>`
-  background-color: #ffffff;
   display: block;
   padding: 16px;
   width: 70px;
@@ -191,6 +190,11 @@ export const TileFavicon = styled('img')<{}>`
   box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.3);
   border-radius: 8px;
   object-fit: contain;
+
+  background: ${p => p.theme.palette.white};
+  @media (prefers-color-scheme: dark) {
+    background: ${p => p.theme.palette.black};
+  }
 `
 
 interface TileProps {