Update theme colors for light, dark, private window and private window with Tor #31644

rebron · 2023-07-14T15:24:24Z

Description

Update the theme colors for light, dark, private window and private window with Tor.

Design

Figma: https://www.figma.com/file/H11ZOl6JMYbCTW4ZJXqR5V/%F0%9F%A6%81-Browser?type=design&node-id=3014%3A33123&mode=design&t=nhfxV22NiGDSYN2e-1

Reproduces how often:

n/a

Brave version (brave://version info)

n/a

Version/Channel Information:

Can you reproduce this issue with the current release? n/a
Can you reproduce this issue with the beta channel? n/a
Can you reproduce this issue with the nightly channel? n/a

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:

fix brave/brave-browser#31644

MadhaviSeelam · 2023-11-07T00:02:34Z

Verification PASSED using

Brave | 1.62.28 Chromium: 119.0.6045.105 (Official Build) nightly (64-bit)
-- | --
Revision | af1dadeae432bc6f1bed980ac4123d5b7dda6e24
OS | Windows 11 Version 22H2 (Build 22621.2428)

Installed 1.62.28
launched Brave
imported bookmarks
opened few tabs, pinned tabs

Normal window

Light theme - horizontal tab view

1.60.x	1.62.x

Light theme - vertical tab view

1.60.x	1.62.x

Dark theme - horizontal tab view

1.60.x	1.62.x

Dark theme - vertical tab view

1.60.x	1.62.x

Private window

Light theme - horizontal tab view

1.60.x	1.62.x

Light theme - vertical tab view

1.60.x	1.62.x

Dark theme - horizontal tab view

1.60.x	1.62.x

Dark theme - vertical tab view

1.60.x	1.62.x

Private window with Tor

Light theme - horizontal tab view 1.60.x | 1.62.x ----- | -----

|

Light theme - vertical tab view

1.60.x	1.62.x

Dark theme - horizontal tab view

1.60.x	1.62.x

Dark theme - vertical tab view

1.60.x	1.62.x

Guest window

1.60.x	1.62.x

Profile custom theme

Light theme - horizontal	Light theme - vertical

Dark theme - horizontal	Dark theme - vertical

Light theme - horizontal	Light theme - vertical

Dark theme - horizontal	Dark theme - vertical

aguscruiz · 2023-11-07T11:46:01Z

Just noting here that in private/tor windows, we're showing a dark mode header and light mode content.
We should show them according to the mode the user selected and not mix them

simonhong · 2023-11-08T00:17:03Z

Just noting here that in private/tor windows, we're showing a dark mode header and light mode content. We should show them according to the mode the user selected and not mix them

Filed #34165

fix brave/brave-browser#31644

stephendonner · 2023-12-11T20:52:43Z

Verification `PASSED` using

Brave | 1.62.104 Chromium: 120.0.6099.71 (Official Build) beta (x86_64)
-- | --
Revision | e2b266991247b909fa88520bb12d018223872d29
OS | macOS Version 11.7.10 (Build 20G1427)

Normal window

Light theme - horizontal tab view

`1.61.x`	`1.62.x`

Light theme - vertical tab view

`1.61.x`	`1.62.x`

Dark theme - horizontal tab view

`1.61.x`	`1.62.x`

Dark theme - vertical tab view

`1.61.x`	`1.62.x`

Private window

Light theme - horizontal tab view

`1.61.x`	`1.62.x`

Light theme - vertical tab view

`1.61.x`	`1.62.x`

Dark theme - horizontal tab view

`1.61.x`	`1.62.x`

Dark theme - vertical tab view

`1.61.x`	`1.62.x`

Private window with Tor

Light theme - horizontal tab view

`1.61.x`	`1.62.x`

Light theme - vertical tab view

`1.61.x`	`1.62.x`

Dark theme - horizontal tab view

`1.61.x`	`1.62.x`

Dark theme - vertical tab view

`1.61.x`	`1.62.x`

Guest window

`1.61.x`	`1.62.x`

Custom-theme profile

`Profile 1`, Dark Teal

Light theme - horizontal	Light theme - vertical

Dark theme - horizontal	Dark theme - vertical

`Profile 2`, Beige and White

Light theme - horizontal	Light theme - vertical

Dark theme - horizontal	Dark theme - vertical

btlechowski · 2023-12-27T13:43:45Z

Verification `PASSED` using

Brave	1.62.122 Chromium: 120.0.6099.144 (Official Build) beta (64-bit)
Revision	cfddebe77d394064c472fda64afcd9fbed34ceb4
OS	Linux

Normal window

Light theme - horizontal tab view

Light theme - vertical tab view

Dark theme - horizontal tab view

Dark theme - vertical tab view

Private window

Light theme - horizontal tab view

Light theme - vertical tab view

Dark theme - horizontal tab view

Dark theme - vertical tab view

Private window with Tor

Light theme - horizontal tab view

Light theme - vertical tab view

Dark theme - horizontal tab view

Dark theme - vertical tab view

Guest window

Custom-theme profile

`Profile 1`, Dark Teal

Light theme - horizontal	Light theme - vertical

Dark theme - horizontal	Dark theme - vertical

nintendork07 · 2024-01-25T17:45:06Z

any chance this change could get reversed??? the new themes are too dark and text is much less legible, especially in private windows. the icons are also basically invisible. it's giving me a lot more eye strain trying to read the tab & URL text fields

mc0ps · 2024-01-28T19:43:40Z

I loved the default theme color for dark mode before this change. Not sure what the motivation was to mess with something that everyone seemed to like. I have a similar issue with the recent "polishing" of the icons by rounding the corners. Please consider reverting these styling changes or give users an option to retain the legacy styling.

drkdw · 2024-01-29T10:35:51Z

I like the new dark theme!

I do have a question, how do you place the slack, twitter and gmail icon next to the tabs? I want to try that too.

Edit: I just found it, you have to 'pin' the tab. I do notice my Brave doesn't have the same look & feel for these icons. I don't have that border around the icons and not so well aligned; see screenshot:

JoshAntBrown · 2024-01-29T12:03:06Z

I'm all for improvements, but I don't understand how this can be considered an improvement. I'm sure dark mode probably looks nice, but the light mode theme now looks washed out and broken.

I've left some feedback on the community forum: https://community.brave.com/t/what-did-you-do-the-ui-looks-broken/528747.

If you want to introduce a new theme for some reason, then build it as a theme and make it the default, allow people to revert back to the previous theme.

aguscruiz · 2024-01-30T14:15:45Z

Hi everyone, thanks for the feedback.
We're working on some color tweaks that should improve contrast and brightness a bit.

@drkdw if you want to test out the new look and feel for the icons, you have to enable this flag #brave-horizontal-tabs-update. We're testing it out internally first :)

drkdw · 2024-01-30T14:35:43Z

@aguscruiz Thx! Looks great ;)

stephendonner · 2024-02-01T18:46:49Z

We've landed a followup to lighten-up some of these colors; you can see it using the current nightly builds: #35624

nintendork07 · 2024-09-19T19:10:57Z

was this changed again? i updated to 1.70.117 today and the colors are too way dark.

rebron added QA/Yes release-notes/include feature/themes OS/Desktop priority/P3 The next thing for us to work on. It'll ride the trains. labels Jul 14, 2023

zenparsing self-assigned this Aug 30, 2023

rebron unassigned zenparsing Oct 11, 2023

simonhong self-assigned this Oct 11, 2023

Brave-Matt mentioned this issue Oct 12, 2023

Vertical Tabs: tab highlights when selecting multiple tabs are too subtle #33604

Open

simonhong mentioned this issue Oct 16, 2023

Refresh browser UI brave/brave-core#20535

Merged

25 tasks

simonhong added a commit to brave/brave-core that referenced this issue Oct 17, 2023

Refresh browser window theme colors

26fb87f

fix brave/brave-browser#31644

simonhong added a commit to brave/brave-core that referenced this issue Nov 1, 2023

Refresh browser UI styles

525e280

fix brave/brave-browser#31644

simonhong closed this as completed in brave/brave-core#20535 Nov 1, 2023

brave-builds added this to the 1.62.x - Nightly milestone Nov 1, 2023

MadhaviSeelam added QA/In-Progress Indicates that QA is currently in progress for that particular issue QA Pass-Win64 and removed QA/In-Progress Indicates that QA is currently in progress for that particular issue labels Nov 7, 2023

MadhaviSeelam mentioned this issue Nov 7, 2023

Disable Bookmarks & Reading list buttons on the sidebar in Guest window #34162

Closed

simonhong mentioned this issue Nov 8, 2023

Sidebar panel header & contents background colors are not matched #34165

Closed

mherrmann pushed a commit to brave/brave-core that referenced this issue Nov 9, 2023

Refresh browser UI styles

84925b2

fix brave/brave-browser#31644

LaurenWags added the QA/Test-All-Platforms label Dec 8, 2023

stephendonner added the QA/In-Progress Indicates that QA is currently in progress for that particular issue label Dec 11, 2023

stephendonner added QA Pass-macOS and removed QA/In-Progress Indicates that QA is currently in progress for that particular issue labels Dec 12, 2023

btlechowski added the QA Pass-Linux label Dec 27, 2023

LaurenWags mentioned this issue Jan 24, 2024

Desktop Release Notes for 1.62.x Release #35541

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Update theme colors for light, dark, private window and private window with Tor #31644

Update theme colors for light, dark, private window and private window with Tor #31644

rebron commented Jul 14, 2023

MadhaviSeelam commented Nov 7, 2023 •

edited

Loading

aguscruiz commented Nov 7, 2023

simonhong commented Nov 8, 2023

stephendonner commented Dec 11, 2023 •

edited

Loading

`Profile 1`, Dark Teal

`Profile 2`, Beige and White

btlechowski commented Dec 27, 2023

`Profile 1`, Dark Teal

nintendork07 commented Jan 25, 2024 •

edited

Loading

mc0ps commented Jan 28, 2024

drkdw commented Jan 29, 2024 •

edited

Loading

JoshAntBrown commented Jan 29, 2024

aguscruiz commented Jan 30, 2024

drkdw commented Jan 30, 2024

stephendonner commented Feb 1, 2024

nintendork07 commented Sep 19, 2024

Update theme colors for light, dark, private window and private window with Tor #31644

Update theme colors for light, dark, private window and private window with Tor #31644

Comments

rebron commented Jul 14, 2023

Description

Design

Reproduces how often:

Brave version (brave://version info)

Version/Channel Information:

Other Additional Information:

Miscellaneous Information:

MadhaviSeelam commented Nov 7, 2023 • edited Loading

Normal window

Private window

Private window with Tor

Guest window

Profile custom theme

aguscruiz commented Nov 7, 2023

simonhong commented Nov 8, 2023

stephendonner commented Dec 11, 2023 • edited Loading

Verification PASSED using

Normal window

Private window

Private window with Tor

Guest window

Custom-theme profile

Profile 1, Dark Teal

Profile 2, Beige and White

btlechowski commented Dec 27, 2023

Verification PASSED using

Normal window

Private window

Private window with Tor

Guest window

Custom-theme profile

Profile 1, Dark Teal

nintendork07 commented Jan 25, 2024 • edited Loading

mc0ps commented Jan 28, 2024

drkdw commented Jan 29, 2024 • edited Loading

JoshAntBrown commented Jan 29, 2024

aguscruiz commented Jan 30, 2024

drkdw commented Jan 30, 2024

stephendonner commented Feb 1, 2024

nintendork07 commented Sep 19, 2024

MadhaviSeelam commented Nov 7, 2023 •

edited

Loading

stephendonner commented Dec 11, 2023 •

edited

Loading

Verification `PASSED` using

`Profile 1`, Dark Teal

`Profile 2`, Beige and White

Verification `PASSED` using

`Profile 1`, Dark Teal

nintendork07 commented Jan 25, 2024 •

edited

Loading

drkdw commented Jan 29, 2024 •

edited

Loading