[Nala]: Remove Chromium color overrides

[fallaciousreasoning]

Description

With the new Nala theming work @aguscruiz has been doing, it should be possible for us to remove a bunch of the overriding logic we have in our brave_color_mixer and brave_tabs_color_mixer and just use the underlying colors from Chromium.

As an added bonus, this means we can enable the tri-color themes Chromium is using now before they remove support for the old dual color themes.

*Note:
As theming changes (especially to dark mode) are often controversial we should have a blog post explaining the changes.

Solid Color Themes

Existing users, who've picked one of the solid color themes will not be affected by these changes. However, if they change their theme color the only way to get the solid color theme back will be to install that theme from the Chrome Web Store.

Default Theme for New Users

By default Chromium sets the default theme to be the Gray/Blue theme. This is a bit different to the current default theme in Brave which is Gray/light gray. We should ensure that we default to the Gray/Gray theme.

Dark Theme Changes

This is likely to be the most controversial part of the change. The new dark theme is slightly lighter than the existing dark theme, and is inherited from upstream. This will make it significantly easier for us to maintain, and there will be far fewer override points after this change.

However, people are often pretty unhappy when the colors in their browser change. As a mitigation, in a blog post we should point users to the Just Black theme in the Chrome Web Store, which should result in a suitably dark theme.

cc @rebron & @aguscruiz for all the stuff I've forgotten to mention.

Approach

There are few parts to this change:

1. Remove unnecessary overrides
2. Enable Tri-Color themes by reverting patches
   • Revert brave/brave-core@18090d1
   • Revert brave/brave-core@4877e2f
3. Ensure Gray/Gray theme is selected by default

[MadhaviSeelam]

Verification PASSED using

Brave | 1.71.94 Chromium: 129.0.6668.59 (Official Build) beta (64-bit)
-- | --
Revision | 90ea886c66dbbc8d7c5aecda57b6ef3c4d513497
OS | Windows 11 Version 23H2 (Build 22631.4169)

1. Installed 1.71.94
2. opened brave://settings/manageProfile in a new tab
3. confirmed new tri-color theme is shown with Grey is selected as a default color
4. confirmed the new themes have a light/dark mode (which are different, unlike the old dual color themes)
5. The new light/dark theme should be largely similar to the existing light/dark theme????
6. confirmed vertical tabs looked as expected in light/dark mode
7. confirmed horizontal tabs looked as expected in light/dark mode
8. confirmed Omnibox still have hover/selected state when open
9. confirmed If texted is edited in the omnibox and close it, the omnibox should look the same as when its just showing the URL

Case 1: Normal Window - Default (Gray/Gray) - PASSED

Horizontal tab view

• Confirmed tab bar/inactive tabs in horizontal view shown in default gray color
• Confirmed active tab shown in white

1.70.x	1.71.x

Vertical tabs - PASSED

• Confirmed vertical tab strip is not dark compared to 1.70.x which is expected as per the issue description
• Confirmed active tab shown darker than 1.70.x

1.70.x	1.71.x

omnibox hover/selected state when open - PASSED

• Entered a string in the omnibox and hovered over the entries

• clicked in the omnibox

• opened a new tab and click anywhere to show placeholder in the omnibox

• Confirmed when hovered over, result entries were highlighted with gray

• Confirmed when hovered over on selected result, result was highlighted with gray

• Confirmed empty omnibox has reddish tone of Gray
   
  1.70.x | 1.71.x
  ----- | -----
  |
  |
  |

• Background text and font of the results have coordinated colors in the omnibox

example	example	example

• confirmed If texted is edited in the omnibox and close it, the omnibox should look the same as when its just showing the URL

example	example	example

Case 2: New Window - Violet - PASSED

• continued from Case 1 above
• opened New window via hamburger menu
• opened brave://settings/manageProfile
• selected Violet theme

Horizontal tab view

example	example	example	example

Vertical tab view

example	example	example	example

Multiple profiles - system generated custom color - PASSED

• Add new profile via hamburger menu
• verified custom color was picked by default
• entered a new profile name (Profile 2)
• clicked Done

example	example	example	example	example

Install dark theme from Chrome store - PASSED

• Installed 1.71.94
• install Just Black theme via chrome webstore

Horizontal tab view and vertical tab view looks a little darker with Just Black than Brave dark theme

example	example	example	example

Upgrade - PASSED

Existing theme is retained - Light green to Orange - PASSED

1. Installed 1.70.117
2. launched Brave
3. opened brave://settings/manageProfile
4. selected Light green
5. closed Brave
6. renamed the profile Brave-Browser-Beta
7. installed 1.71.94
8. launched Brave

• Confirmed Light green theme is retained
• Confirmed tri color themes is shown in the brave://settings/manageProfile
• Confirmed Light green is populated in the Custom color widget
• Confirmed omnibox with a URL placeholder text shows whitish
• Confirmed when hovered over, result entries were highlighted with gray
• Confirmed when hovered over on selected result, result was highlighted with gray

step 1	step 3	step 7	step 10 -11	example	example	example	example

Change from Dark purple to Aqua to Ultra Violet - PASSED

1. Installed 1.70.117
2. launched Brave
3. opened brave://settings/manageProfile
4. selected Dark purple
5. closed Brave
6. renamed the profile Brave-Browser-Beta
7. installed 1.71.94
8. launched Brave
9. opened brave://settings/manageProfile
10. switched theme from Aqua
11. clicked on Custom color widget which has green to switch back to previous theme
12. Color picker popup is shown
13. loaded https://chromewebstore.google.com/collection/chrome_color_themes
14. selected Ultra Violet theme
15. clicked Add to Brave

• Confirmed Dark purple theme is retained
• Confirmed tri color themes is shown in the brave://settings/manageProfile
• Confirmed Dark purple is populated in the Custom color widget
• Confirmed theme was changed from to Aqua
  -Confirmed unable to switch it back to previous theme Light green instead Color picker is shown
  -Confirmed Ultra Violet theme was added which was close to Dark purple

step 4	step 9	step 10	step 12	step 13	step 14	step 15

[LaurenWags]

Verified with

Brave | 1.71.105 Chromium: 129.0.6668.89 (Official Build) beta (x86_64)
-- | --
Revision | f69ba167992437799f1dbcce81e90ba501a3d63e
OS | macOS Version 14.7 (Build 23H124)

1. Installed 1.71.x
2. opened brave://settings/manageProfile in a new tab
3. confirmed new tri-color theme is shown with Grey is selected as a default color

Light theme	Dark theme

4. confirmed the new themes have a light/dark mode (which are different, unlike the old dual color themes)

Light theme	Dark theme

5. The new light/dark theme should be largely similar to the existing light/dark theme

Note

There is no separator (most visible on light theme) on 1.71.x due to rounded corners which is currently only enabled on Nightly and Beta. Fix coming for this with brave/brave-core#25738.

1.70.x	1.71.x

6. confirmed vertical tabs looked as expected in light/dark mode

Note

Encountered #41450 which exists in all channels, not a regression from this PR.

Light theme	Dark theme

7. confirmed horizontal tabs looked as expected in light/dark mode

Light theme	Dark theme

8. confirmed Omnibox still have hover/selected state when open

Light theme	Dark theme

9. confirmed If texted is edited in the omnibox and close it, the omnibox should look the same as when its just showing the URL

.	Light theme	Dark theme
Omnibox not in focus (no text entered)
Omnibox in focus with text entered (showing drop down)
Omnibox in focus with text (drop down not shown)
Omnibox with text entered, not in focus

Case 1 - default light/dark theme - PASSED

See above for screenshots.
Covered horizontal and vertical tab views as well as light and dark themes.

Case 2: Theme color with light/dark - PASSED

• opened New window via hamburger menu
• opened brave://settings/manageProfile
• selected "Violet" theme
• Compared light/dark tinting to "Violet" theme for both horizontal and vertical tab views

Light	Dark

Multiple profiles - system generated custom color - PASSED

• Add new profile via hamburger menu
• verified custom color was picked by default
• entered a new profile name (Profile 2)
• clicked Done

example	example	example	example	example

Install dark theme from Chrome store - PASSED

• Installed 1.71.x
• install Morpheon Dark theme via chrome webstore

Horizontal tab view and vertical tab view looks darker with Morpheon Dark than Brave dark theme

example	example	example

Upgrade - PASSED

Existing theme is retained - PASSED

1. Installed 1.70.123
2. launched Brave
3. opened brave://settings/manageProfile
4. selected purple

Example	Example

5. closed Brave
6. renamed the profile Brave-Browser-Beta
7. installed 1.71.105
8. launched Brave

• Confirmed bright purple theme is retained
• Confirmed tri color themes is shown in the brave://settings/manageProfile
• Confirmed bright purple is populated in the Custom color widget
• Confirmed omnibox with a URL placeholder text shows white-ish
• Confirmed when hovered over, result entries were highlighted with gray
• Confirmed when hovered over on selected result, result was highlighted with gray

example	example	example	example	example

Change from purple to Aqua to Ultra Violet - PASSED

1. Installed 1.70.123
2. launched Brave
3. opened brave://settings/manageProfile
4. selected purple

5. closed Brave
6. renamed the profile Brave-Browser-Beta
7. installed 1.71.105
8. launched Brave
9. opened brave://settings/manageProfile
10. confirmed theme is retained (as custom color)

11. switched theme to one of the pre-set tri-color ones: Aqua

12. clicked on Custom color widget
13. Color picker popup is shown (did not select a custom color, left profile color as Aqua)

14. loaded https://chromewebstore.google.com/collection/chrome_color_themes
15. selected Ultra Violet theme
16. clicked Add to Brave

[btlechowski]

Verification PASSED using

Brave	1.71.113 Chromium: 130.0.6723.58 (Official Build) (64-bit)
Revision	3ee74228044546a84c661332ddb441a7a68108fa
OS	Linux

1. Installed 1.71.113
2. opened brave://settings/manageProfile in a new tab
3. confirmed new tri-color theme is shown with Grey is selected as a default color
4. confirmed the new themes have a light/dark mode (which are different, unlike the old dual color themes)
5. The new light/dark theme should be largely similar to the existing light/dark theme????
6. confirmed vertical tabs looked as expected in light/dark mode
7. confirmed horizontal tabs looked as expected in light/dark mode
8. confirmed Omnibox still have hover/selected state when open
9. confirmed If texted is edited in the omnibox and close it, the omnibox should look the same as when its just showing the URL

Case 1: Normal Window - Default (Gray/Gray) - PASSED

Horizontal tab view

• Confirmed tab bar/inactive tabs in horizontal view shown in default gray color
• Confirmed active tab shown in white

Vertical tabs - PASSED

• Confirmed vertical tab strip is not dark compared to 1.70.x which is expected as per the issue description
• Confirmed active tab shown darker than 1.70.x

omnibox hover/selected state when open - PASSED

• Entered a string in the omnibox and hovered over the entries

• clicked in the omnibox

• opened a new tab and click anywhere to show placeholder in the omnibox

• Confirmed when hovered over, result entries were highlighted with gray

• Confirmed when hovered over on selected result, result was highlighted with gray

• Confirmed empty omnibox has reddish tone of Gray
   

• Background text and font of the results have coordinated colors in the omnibox

Case 2: New Window - PASSED

• continued from Case 1 above
• opened New window via hamburger menu
• opened brave://settings/manageProfile
• selected Violet theme

Horizontal tab view

Vertical tab view

||
--|--

Multiple profiles - system generated custom color - PASSED

• Add new profile via hamburger menu
• verified custom color was picked by default
• entered a new profile name (Profile 2)
• clicked Done

Install dark theme from Chrome store - PASSED

• Installed 1.71.94
• install Just Black theme via chrome webstore

Horizontal tab view and vertical tab view looks a little darker with Just Black than Brave dark theme

Upgrade - PASSED

Existing theme is retained - PASSED

1. Installed 1.70.x
2. launched Brave
3. opened brave://settings/manageProfile
4. selected Pink
5. closed Brave
6. installed 1.71.x
7. launched Brave

• Confirmed tri color themes is shown in the brave://settings/manageProfile
• Confirmed omnibox with a URL placeholder text shows whitish
• Confirmed when hovered over, result entries were highlighted with gray
• Confirmed when hovered over on selected result, result was highlighted with gray

1.70.x

1.71.x