Themes from CWS don't work when switching between light and dark modes

[phoogm]

Description

Installing a theme from the theme store does not work when switching from light to dark mode or from light to private or private with Tor. At this moment it seems not possible to use any other theme than the default one.

Steps to Reproduce

1. Install theme from theme store
2. Switch light to dark mode or light to private mode
3. Observe weird color combinations or icons becoming invisible

Actual result:

Expected result:

User should be able to install a custom theme and indicate if it should replace the default light theme or the default dark theme - e.g. when set to automatic - the light to dark switch by macOS would switch the custom light to the custom dark theme and back again or custom light to default dark theme etc. Assuming the private browsing or private browsing with Tor is locked for theme changing, which would reduce theming complexity.

Reproduces how often:

No themes found that work without issues

Brave version (brave://version info)

Brave | 1.8.96 Chromium: 81.0.4044.138 (Official Build) (64-bit)
Revision | 8c6c7ba89cc9453625af54f11fd83179e23450fa-refs/branch-heads/4044@{#999}
OS | macOS Version 10.15.4 (Build 19E287)

Version/Channel Information:

• Can you reproduce this issue with the current release? Yes
• Can you reproduce this issue with the beta channel? Yes
• Can you reproduce this issue with the dev channel? Yes
• Can you reproduce this issue with the nightly channel? Yes

Other Additional Information:

• Does the issue resolve itself when disabling Brave Shields? N/A
• Does the issue resolve itself when disabling Brave Rewards? N/A
• Is the issue reproducible on the latest version of Chrome? N/A

Miscellaneous Information:

Thanks for looking into, best regards.

[bsclifton]

cc: @petemill @simonhong
I believe some of our colors are effectively hard-coded, so they would override what is used by a theme

[simonhong]

@bsclifton Yes, right. I think we should consider custom theme when we choose our colors.

[bsclifton]

@simonhong can you share steps for installing a custom theme that you had used?

[simonhong]

@bsclifton You can install any themes from chrome webstore - https://chrome.google.com/webstore/category/themes

[kjozwiak]

Verification PASSED on macOS 10.15.5 Catalina x64 using the following build:

Brave | 1.10.86 Chromium: 83.0.4103.61 (Official Build) (64-bit)
-- | --
Revision | 94f915a8d7c408b09cc7352161ad592299f384d2-refs/branch-heads/4103@{#561}
OS | macOS Version 10.15.5 (Build 19F101)

Used https://chrome.google.com/webstore/detail/pro-grey/enhpebdanojkmhbbneclbkmpleemilaj as the theme for verification as per #9808 (comment).

1.9.80 CR: 81.0.4044.138	1.10.86 Chromium: 83.0.4103.61

Verification passed on

Brave	1.10.87 Chromium: 83.0.4103.61 (Official Build) (64-bit)
Revision	94f915a8d7c408b09cc7352161ad592299f384d2-refs/branch-heads/4103@{#561}
OS	Ubuntu 18.04 LTS

Custom theme
Used https://chrome.google.com/webstore/detail/pro-grey/enhpebdanojkmhbbneclbkmpleemilaj

Normal Window

Private Window

Private Window with Tor

Logged #10197

Verification passed on

Brave | 1.10.87 Chromium: 83.0.4103.61 (Official Build) (64-bit)
-- | --
Revision | 94f915a8d7c408b09cc7352161ad592299f384d2-refs/branch-heads/4103@{#561}
OS | Windows 10 OS Version 1803 (Build 17134.1006)

Used https://chrome.google.com/webstore/detail/pro-grey/enhpebdanojkmhbbneclbkmpleemilaj as the theme for verification as per #9808 (comment).

Normal window

Private window

Tor