Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Dark Mode / Light Mode / Private #1798

Closed
jamesmudgett opened this issue Jul 1, 2019 · 30 comments

Comments

@jamesmudgett
Copy link
Contributor

commented Jul 1, 2019

This issue was created to track styling relating to
Screen Shot 2019-07-01 at 12 16 27 PM
Dark/Light/Private modes.

@jamesmudgett

This comment has been minimized.

Copy link
Contributor Author

commented Jul 1, 2019

Dark mode shields panel styling
Screen Shot 2019-07-01 at 12 19 08 PM

Settings, bookmarks, history, downloads should follow similar styling - light text on dark background.

@jamesmudgett jamesmudgett added the design label Jul 1, 2019
@EyanGoldman EyanGoldman added this to the 1.3.0 milestone Jul 18, 2019
@miladmaz12

This comment has been minimized.

Copy link

commented Jul 19, 2019

related to #81

@karenkliu

This comment has been minimized.

Copy link
Collaborator

commented Jul 26, 2019

@deeppandya Please include minor adjustments to onboarding for dark mode:

dark mode 1
dark mode 3
dark mode 4
dark mode 5

@deeppandya

This comment has been minimized.

Copy link
Contributor

commented Jul 27, 2019

@karenkliu we don't have indicators at bottom. so do you want to add it for dark mode ?

@karenkliu

This comment has been minimized.

Copy link
Collaborator

commented Jul 29, 2019

@deeppandya Oh - you're completely right! Please ignore the indicator; that's a leftover design element that should've been removed. I removed the screen from my previous comment as well.

@EyanGoldman

This comment has been minimized.

Copy link

commented Aug 5, 2019

UPDATED IN NEW COMMENT BELOW
Menu and toggle behavior:
All Versions:
Add a dropdown box in "Settings" > "Appearance" titled "Theme" (options will vary w/ Android Version, see below)
Android Q++:

  • In the kebab menu, above "Brave Rewards" add a item called "Theme" with a light icon, dark icon and a right arrow
  • Dark icon makes the browser go to dark mode
  • Light icon makes the browser go to light mode
  • Arrow will take user to "Settings" > "Appearance". In the dropdown box will be "Dark", "Light", "System" (default). If System is selected, the browser will follow OS theme, if "Dark" selected browser goes to Dark Mode, if "Light" selected browser will go to Light Mode. The icons in kebab menu will parity dark/light selections even when in "System".

< Android Q:

  • Same as above but without a "System" selection in the dropdown box as only Android Q supports this functionality

@karenkliu can provide correct icons and mocks if needed
cc: @deeppandya

@deeppandya

This comment has been minimized.

Copy link
Contributor

commented Aug 7, 2019

@karenkliu can you please provide mocks and icons for this ?

@karenkliu

This comment has been minimized.

Copy link
Collaborator

commented Aug 8, 2019

@deeppandya
dark menu 1

Tapping "Color theme..." shows a system dialog with theme options

dark menu Q++

@EyanGoldman

This comment has been minimized.

Copy link

commented Aug 8, 2019

Updated Menu and toggle behavior (see graphics above):
All Versions:
Add a kebab menu item title "Themes" under Brave Rewards
Android Q++:
Three modal options "Light theme", "Dark theme", "System default"
Dark icon makes the browser go to dark mode
Light icon makes the browser go to light mode
System default icon makes the browser follow OS theme
< Android Q:

Same as above but without a "System default" option in the modal as only Android Q supports this functionality

@srirambv

This comment has been minimized.

Copy link
Collaborator

commented Aug 8, 2019

Add a kebab menu item title "Themes" in the kebab menu under Brave Rewards

I think its better if this goes under Display instead of under Advanced. Theme can be the second entry under Appearance

@EyanGoldman

This comment has been minimized.

Copy link

commented Aug 8, 2019

@srirambv are you saying instead of having it in the kebab menu? With the way @karenkliu designed it, we wouldn't even need a page on the settings menu

@deeppandya

This comment has been minimized.

Copy link
Contributor

commented Aug 8, 2019

@EyanGoldman @jamesmudgett @karenkliu what should we do if night mode experiment is enabled for the device ? in that case, we already show Themes after Home page in settings.

@EyanGoldman

This comment has been minimized.

Copy link

commented Aug 8, 2019

We should add that page to settings then regardless of whether the experiment is enabled of disabled. Let's just make that page mirror the buttons on the modal (we'll build more functionality into it once we get full themes up and running). They will parity the configuration of the above modal and allow you to change them as well. Wasn't aware that we already had a "Themes" page built into the browser.
cc: @deeppandya @srirambv

@srirambv

This comment has been minimized.

Copy link
Collaborator

commented Aug 8, 2019

@srirambv are you saying instead of having it in the kebab menu? With the way @karenkliu designed it, we wouldn't even need a page on the settings menu

yup my bad. I misunderstood that this was an entry in the settings menu. @karenkliu design looks good 👍

@deeppandya

This comment has been minimized.

Copy link
Contributor

commented Aug 8, 2019

@EyanGoldman what should be the default option for devices < android Q ? for > android Q devices i believe it should be system default\

@EyanGoldman

This comment has been minimized.

Copy link

commented Aug 8, 2019

@deeppandya light mode

@deeppandya

This comment has been minimized.

Copy link
Contributor

commented Aug 8, 2019

@EyanGoldman @karenkliu we should keep the text and order for different theme options same as we have in settings. in settings for Light mode, it's Light and for dark mode it's Dark

@karenkliu

This comment has been minimized.

Copy link
Collaborator

commented Aug 8, 2019

@deeppandya Yes, follow text and order in Settings. I wasn't aware of the settings design.

@deeppandya

This comment has been minimized.

Copy link
Contributor

commented Aug 8, 2019

And one last thing, @karenkliu for default dialog in android, we don't have title in centre, Cancel button has the same color as Done and radiobuttons doesn't have icons. if we need to modify any of above things, we need to have a custom dialog. and i wouldn't recommend it.

@karenkliu

This comment has been minimized.

Copy link
Collaborator

commented Aug 8, 2019

@deeppandya Aw, no icons? Alright..

@EyanGoldman

This comment has been minimized.

Copy link

commented Aug 8, 2019

One more thing. I think without the icons "Follow system" would be clearer than "System default"

@deeppandya

This comment has been minimized.

Copy link
Contributor

commented Aug 8, 2019

@EyanGoldman i am trying keep it as we have in settings and in settings we use System defaults

@deeppandya

This comment has been minimized.

Copy link
Contributor

commented Aug 8, 2019

@EyanGoldman after spending time on night mode experiment on android P, i believe we should have all 3 options in the dialog. i checked the theme settings for night mode experiment enabled device on android P and it shows all 3 options and System defaults is the selected option by default.

@EyanGoldman

This comment has been minimized.

Copy link

commented Aug 8, 2019

@deeppandya
For < Android Q light mode. As system default isn't an option, right?
For >= Android Q we should do system default.

@deeppandya

This comment has been minimized.

Copy link
Contributor

commented Aug 8, 2019

@deeppandya
For < Android Q light mode. As system default isn't an option, right?
For >= Android Q we should do system default.

@EyanGoldman i have samsung S8 plus and i can see and activate Light mode for chrome and brave browser. And it runs on android P.

@EyanGoldman

This comment has been minimized.

Copy link

commented Aug 9, 2019

Update: We will no longer need the modal in the kebab menu.

@deeppandya

This comment has been minimized.

Copy link
Contributor

commented Aug 15, 2019

@jamesmudgett can you provide me the color codes for brave shield panel ?

@szaimen

This comment has been minimized.

Copy link

commented Sep 5, 2019

Any update on this?

@deeppandya

This comment has been minimized.

Copy link
Contributor

commented Sep 18, 2019

@srirambv private mode theme is not in the scope of this ticket.

@srirambv

This comment has been minimized.

Copy link
Collaborator

commented Sep 25, 2019

Verification passed on OnePlus 6T with Android 9.0 running 1.4.0 rc3 x64 build

  • Verified able to switch between light/dark mode via option in settings
  • Verified Shields update to dark when browser theme is set to dark
  • Verified Shields is light when browser theme is set to light
  • Verified dark mode doesn't affect rewards panel notifications (Verified here #2081 (comment))
  • Verified there is no private theme when a private tab is opened
  • Verified context menu's respect the browser theme and inherits the theme (verified here #2073 (comment))
  • Verified browser theme updates instantly when theme is changed via settings
  • Verified Sync pages are dark-themed when browser theme is dark (Verified here #2075 (comment))
    *Verified rewards page and internal pages are not affected by browser theme (out of scope)

Verification passed on Asus Zenfone (x86) with Android 6.0 running 1.4.0 rc3 BraveModernx86.apk

  • Verified able to switch between light/dark mode via option in settings
  • Verified Shields update to dark when browser theme is set to dark
  • Verified Shields are light when browser theme is set to light
  • Verified there is no private theme when a private tab is opened
  • Verified context menu's respect the browser theme and inherits the theme (verified here #2073 (comment) and follow up issue #2100 logged)
  • Verified browser theme updates instantly when theme is changed via settings
  • Verified Sync pages are dark-themed when browser theme is dark (Verified here #2075 (comment))

Verification passed on BraveModernarm v1.4.0-rc.4 on Huawei MediaPd M3 Lite 10 (Android 7.0).

  • Verified able to switch between light/dark mode via option in settings
  • Verified Shields update to dark when browser theme is set to dark
  • Verified Shields are light when browser theme is set to light
  • Verified there is no private theme when a private tab is opened
  • Verified context menu's respect the browser theme and inherits the theme
  • Verified browser theme updates instantly when theme is changed via settings
  • Verified Sync pages are dark-themed when browser theme is dark (Verified here #2075).

Verification passed on Samsung Galaxy j3 with Android 5.1.1 running BraveModernarm1.4.0 rc4 build

  • Verified able to switch between light/dark mode via option in settings
  • Verified Shields update to dark when browser theme is set to dark
  • Verified Shields is light when browser theme is set to light
  • Verified dark mode doesn't affect rewards panel notifications (Verified here #2081 (comment))
  • Verified there is no private theme when a private tab is opened
  • Verified context menu's respect the browser theme and inherits the theme (verified here #2073 (comment))
  • Verified browser theme updates instantly when theme is changed via settings
  • Verified Sync pages are dark-themed when browser theme is dark (Verified here #2075 (comment))
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.