Allow theme change during Welcome onboarding

browser/extensions/api/brave_theme_api.cc

@@ -32,5 +32,16 @@ ExtensionFunction::ResponseAction BraveThemeGetBraveThemeTypeFunction::Run() {
   return RespondNow(OneArgument(std::make_unique<base::Value>(theme_type)));
 }
 
+ExtensionFunction::ResponseAction BraveThemeSetBraveThemeTypeFunction::Run() {
+  std::unique_ptr<brave_theme::SetBraveThemeType::Params> params(
+      brave_theme::SetBraveThemeType::Params::Create(*args_));
+  EXTENSION_FUNCTION_VALIDATE(params.get());
+
+  Profile* profile = Profile::FromBrowserContext(browser_context());
+  BTS::SetBraveThemeType(profile, params->type);
+
+  return RespondNow(NoArguments());
+}
+
 }  // namespace api
 }  // namespace extensions

browser/extensions/api/brave_theme_api.h

@@ -31,6 +31,16 @@ class BraveThemeGetBraveThemeTypeFunction : public UIThreadExtensionFunction {
   ResponseAction Run() override;
 };
 
+class BraveThemeSetBraveThemeTypeFunction : public UIThreadExtensionFunction {
+ public:
+  DECLARE_EXTENSION_FUNCTION("braveTheme.setBraveThemeType", UNKNOWN)
+
+ protected:
+  ~BraveThemeSetBraveThemeTypeFunction() override {}
+
+  ResponseAction Run() override;
+};
+
 }  // namespace api
 }  // namespace extensions
 

browser/themes/brave_theme_service.cc

@@ -60,6 +60,19 @@ std::string BraveThemeService::GetStringFromBraveThemeType(
   }
 }
 
+// static
+void BraveThemeService::SetBraveThemeType(Profile* profile, std::string type) {
+  BraveThemeType parsedType = BraveThemeType::BRAVE_THEME_TYPE_DEFAULT;
+
+  if (type == "Light") {
+    parsedType = BraveThemeType::BRAVE_THEME_TYPE_LIGHT;
+  } else if (type == "Dark") {
+    parsedType = BraveThemeType::BRAVE_THEME_TYPE_DARK;
+  }
+
+  profile->GetPrefs()->SetInteger(kBraveThemeType, parsedType);
+}
+
 // static
 base::Value BraveThemeService::GetBraveThemeList() {
   base::Value list(base::Value::Type::LIST);

browser/themes/brave_theme_service.h

@@ -38,6 +38,7 @@ class BraveThemeService : public ThemeService {
   static BraveThemeType GetActiveBraveThemeType(Profile* profile);
   static base::Value GetBraveThemeList();
   static std::string GetStringFromBraveThemeType(BraveThemeType type);
+  static void SetBraveThemeType(Profile* profile, std::string type);
 
   BraveThemeService();
   ~BraveThemeService() override;

browser/ui/webui/brave_webui_source.cc

@@ -198,7 +198,11 @@ void CustomizeWebUIHTMLSource(const std::string &name,
         { "privateExperience", IDS_BRAVE_WELCOME_PAGE_PRIVATE_EXPERIENCE_DESC },
         { "findToolbarTheme", IDS_BRAVE_WELCOME_PAGE_THEME_TITLE },
         { "chooseTheme", IDS_BRAVE_WELCOME_PAGE_THEME_DESC },
-        { "theme", IDS_BRAVE_WELCOME_PAGE_THEME_BUTTON },
+        { "selectTheme", IDS_BRAVE_WELCOME_PAGE_SELECT_THEME_DESC },
+        { "confirmTheme", IDS_BRAVE_WELCOME_PAGE_CONFIRM_THEME_BUTTON },
+        { "light", IDS_BRAVE_WELCOME_PAGE_LIGHT_THEME_DESC },
+        { "dark", IDS_BRAVE_WELCOME_PAGE_DARK_THEME_DESC },
+        { "systemTheme", IDS_BRAVE_WELCOME_PAGE_SYSTEM_THEME_DESC },
         { "skipWelcomeTour", IDS_BRAVE_WELCOME_PAGE_SKIP_BUTTON },
         { "next", IDS_BRAVE_WELCOME_PAGE_NEXT_BUTTON },
         { "done", IDS_BRAVE_WELCOME_PAGE_DONE_BUTTON },

common/extensions/api/brave_theme.json

@@ -56,11 +56,23 @@
               {
                 "name": "type",
                 "type": "string",
-                "description": "current theme type(Dark or Light)"
+                "description": "current theme type (Dark or Light)"
               }
             ]
           }
         ]
+      },
+      {
+        "name": "setBraveThemeType",
+        "type": "function",
+        "description": "Set current theme type",
+        "parameters": [
+          {
+            "name": "type",
+            "type": "string",
+            "description": "current theme type (Dark or Light)"
+          }
+        ]
       }
     ]
   }

components/brave_welcome_ui/actions/welcome_actions.ts

@@ -25,6 +25,12 @@ export const getSearchEngineProvidersSuccess = (searchProviders: Array<Welcome.S
 
 export const getBrowserProfilesSuccess = (browserProfiles: Array<Welcome.BrowserProfile>) => action(types.IMPORT_BROWSER_PROFILES_SUCCESS, browserProfiles)
 
+export const getBrowserThemesSuccess = (browserThemes: Array<Welcome.BrowserTheme>) => action(types.IMPORT_BROWSER_THEMES_SUCCESS, browserThemes)
+
 export const getSearchEngineProviders = () => welcomeUtils.getSearchEngineProviders()
 
 export const getBrowserProfiles = () => welcomeUtils.getBrowserProfiles()
+
+export const getBrowserThemes = () => welcomeUtils.getBrowserThemes()
+
+export const setTheme = (browserTheme: Welcome.BrowserTheme) => action(types.SET_BROWSER_THEME, browserTheme)

components/brave_welcome_ui/brave_welcome.tsx

@@ -7,8 +7,9 @@ import { render } from 'react-dom'
 import { bindActionCreators } from 'redux'
 import { Provider } from 'react-redux'
 
-import Theme from 'brave-ui/theme/brave-default'
-import { ThemeProvider } from 'brave-ui/theme'
+import welcomeDarkTheme from 'brave-ui/theme/welcome-dark'
+import welcomeLightTheme from 'brave-ui/theme/welcome-light'
+import BraveCoreThemeProvider from '../common/BraveCoreThemeProvider'
 
 // Components
 import App from './containers/app'
@@ -20,26 +21,32 @@ import * as welcomeActions from './actions/welcome_actions'
 window.cr.define('brave_welcome', function () {
   'use strict'
 
-  function getSearchEngineProviders () {
+  function loadWelcomeData () {
     const actions = bindActionCreators(welcomeActions, store.dispatch.bind(store))
     actions.getSearchEngineProviders()
-  }
-
-  function getBrowserProfiles () {
-    const actions = bindActionCreators(welcomeActions, store.dispatch.bind(store))
     actions.getBrowserProfiles()
+    actions.getBrowserThemes()
   }
 
   function initialize () {
-    getSearchEngineProviders()
-    getBrowserProfiles()
-    render(
-      <Provider store={store}>
-        <ThemeProvider theme={Theme}>
-          <App />
-        </ThemeProvider>
-      </Provider>,
-      document.getElementById('root'))
+    loadWelcomeData()
+    new Promise(resolve => chrome.braveTheme.getBraveThemeType(resolve))
+    .then((themeType: chrome.braveTheme.ThemeType) => {
+      render(
+        <Provider store={store}>
+          <BraveCoreThemeProvider
+            initialThemeType={themeType}
+            dark={welcomeDarkTheme}
+            light={welcomeLightTheme}
+          >
+            <App />
+          </BraveCoreThemeProvider>
+        </Provider>,
+        document.getElementById('root'))
+    })
+    .catch((error) => {
+      console.error('Problem mounting brave welcome', error)
+    })
     window.i18nTemplate.process(window.document, window.loadTimeData)
   }
 

components/brave_welcome_ui/components/images/index.ts

@@ -35,20 +35,16 @@ export const WelcomeSearchImage = styled(BaseImage).attrs({ src: SearchImage })`
 `
 
 export const WelcomeShieldsImage = styled(BaseImage).attrs({ src: ShieldsImage })`
-  height: 190px;
+  height: 210px;
 `
 
 export const WelcomeThemeImage = styled(BaseImage).attrs({ src: ThemeImage })`
   height: 190px;
 `
 
-interface BackgroundProps {
-  position: string
-}
-
 export const topToBottom = keyframes`
   from {
-    transform: translateY(-100%);
+    transform: translateY(100%);
   }
 
   to {
@@ -70,12 +66,14 @@ export const BackgroundContainer = styled<{}, 'div'>('div')`
   overflow: hidden;
 `
 
-export const Background = styled<BackgroundProps, 'div'>('div')`
+export const Background = styled<{}, 'div'>('div')`
   box-sizing: border-box;
-  background: url('${WelcomeImage}') repeat-x;
-  width: 500%;
-  height: inherit;
-  will-change: transform;
-  transform: translateX(${p => p.position});
-  transition: transform ease-in-out 1200ms;
+  background: url('${WelcomeImage}');
+  width: 100%;
+  height: 136px;
+  background-size: cover;
+  background-position-x: center;
+  position: absolute;
+  bottom: 0;
+  overflow: hidden;
 `