✨New Tabs Page: Enable NTP to be theme aware; closes brave/brave-brow…

…ser#5014

common/extensions/api/_api_features.json

@@ -105,7 +105,8 @@
     "contexts": ["webui"],
     "matches": [
       "chrome://welcome/*",
-      "chrome://settings/*"
+      "chrome://settings/*",
+      "chrome://newtab/*"
     ]
   }]
 }

components/brave_new_tab_ui/brave_new_tab.tsx

@@ -7,7 +7,8 @@ import * as React from 'react'
 import { render } from 'react-dom'
 import { Provider } from 'react-redux'
 import Theme from 'brave-ui/theme/brave-default'
-import { ThemeProvider } from 'brave-ui/theme'
+import DarkTheme from 'brave-ui/theme/brave-dark'
+import BraveCoreThemeProvider from '../common/BraveCoreThemeProvider'
 import wireAPIEventsToStore from './apiEventsToStore'
 
 // Components
@@ -24,15 +25,24 @@ import '../fonts/muli.css'
 function initialize () {
   console.timeStamp('loaded')
   // Get rendering going
-  render(
-    <Provider store={store}>
-      <ThemeProvider theme={Theme}>
-        <App />
-      </ThemeProvider>
-    </Provider>,
-    document.getElementById('root'),
-    () => console.timeStamp('first react render')
-  )
+  new Promise(resolve => chrome.braveTheme.getBraveThemeType(resolve))
+  .then((themeType: chrome.braveTheme.ThemeType) => {
+    render(
+      <Provider store={store}>
+        <BraveCoreThemeProvider
+          initialThemeType={themeType}
+          dark={DarkTheme}
+          light={Theme}
+        >
+          <App />
+        </BraveCoreThemeProvider>
+      </Provider>,
+      document.getElementById('root'),
+      () => console.timeStamp('first react render'))
+  })
+  .catch((error) => {
+    console.error('Problem mounting brave new tab', error)
+  })
   window.i18nTemplate.process(window.document, window.loadTimeData)
 }