add theme setting as an inline option to onboarding process

[rebron]

Description

Currently, when users get to the 'Choose your color theme' during our onboarding process, selecting Choose Your Theme sends them to brave://settings in a new tab.

We should offer the same drop down list from settings (instead of the 'Choose your theme button'):
same as [OS]
Light
Dark

and let the user make this choice inline during the onboarding process.

Current Screen

[rebron]

cc: @rossmoody

[imptrx]

@rossmoody Do we have an updated visual spec on how the new screen should look? Aside from the the text and the dropdown options - I am assuming we want to actually set the theme when the user clicks the button rather than change from drop down?

[rossmoody]

Yeah, that would be amazing if we could have the theme change like it does in settings. The behavior would follow the same pattern as import and search. Disabled button to start, placeholder read "Select a theme" and then any available options, if an option is selected then the button auto proceeds to the next screen.

[bsclifton]

@imptrx I can help with the C++ side of this change 😄

[petemill]

@rebron @rossmoody when reviewing the PR I had some notes about the UX / spec for this and maybe simplifying. I'm semi-concerned about getting in the state where a percentage of users have unnecessarily overridden the 'Same as xyzOS' feature.

brave/brave-ui#512 (comment)

One concern I have with this UX @rossmoody is that the user may feel that they have to pick a theme, and not know that 'Same as {macOS,Windows}' is the default. Therefore they may explicitly choose Light / Dark, and not know that they could have it follow the OS when they changed it.

To be honest, I think having this choice on the welcome screen had high value, before we matched system theme, especially if it wasn't a drop-down but was a visual choice, but now it seems confusing perhaps.

I don't know if there's a way we can offer this tri-state in a way that doesn't prompt users to override the default unnecessarily?

Edit: Perhaps the choices in this welcome screen could be different to what's offered in the Settings page, in that we offer 2 choices: Dark or Light (ideally graphically). The choice is pre-selected to whatever the system theme is (or Light if not on an OS which supports dark mode). Only if the user changes to a theme that the OS is not currently on, do we save a setting as specificall 'Light' or 'Dark'. Otherwise, we leave it at 'System'. WDYT @rossmoody ?

[GeetaSarvadnya]

Verification passed on

Brave	0.69.128 Chromium: 77.0.3865.75 (Official Build) (64-bit)
Revision	201e747d032611c5f2785cae06e894cf85be7f8a-refs/branch-heads/3865@{#776}
OS	Windows 10 OS Version 1803 (Build 17134.1006)

• Verified the test plan from Allow theme change during Welcome onboarding brave-core#2909
• Select a theme from the onboarding flow doesn't open brave://setting page in a new tab
  
  

Verification passed on

Brave	0.69.128 Chromium: 77.0.3865.75 (Official Build) (64-bit)
Revision	201e747d032611c5f2785cae06e894cf85be7f8a-refs/branch-heads/3865@{#776}
OS	Ubuntu 18.04 LTS

• Verified the test plan from Allow theme change during Welcome onboarding brave-core#2909
• Select a theme from the onboarding flow doesn't open brave://setting page in a new tab
  

Verification PASSED on macOS 10.14.6 x64 using the following build:

Brave	0.69.129 Chromium: 77.0.3865.90 (Official Build) (64-bit)
Revision	58c425ba843df2918d9d4b409331972646c393dd-refs/branch-heads/3865@{#830}
OS	macOS Version 10.14.6 (Build 18G95)