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

proposal: x/website: add dark (night) theme #34601

Open
vitaly-zdanevich opened this issue Sep 29, 2019 · 17 comments

Comments

@vitaly-zdanevich
Copy link
Contributor

@vitaly-zdanevich vitaly-zdanevich commented Sep 29, 2019

Please read https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme

I can do it if you approve me.

@gopherbot gopherbot added this to the Unreleased milestone Sep 29, 2019
@agnivade

This comment has been minimized.

Copy link
Contributor

@agnivade agnivade commented Sep 30, 2019

@andybons andybons changed the title x/website: please add dark (night) theme x/website: add dark (night) theme Sep 30, 2019
@andybons

This comment has been minimized.

Copy link
Member

@andybons andybons commented Sep 30, 2019

This is a substantial amount of work. In design, implementation, and testing. We would not want to force dark mode users to only see the dark mode version, so we’d want a toggle.

@vitaly-zdanevich when you say you can do it, which parts are you planning to do?

@vitaly-zdanevich

This comment has been minimized.

Copy link
Contributor Author

@vitaly-zdanevich vitaly-zdanevich commented Oct 1, 2019

@andybons it looks like not difficult task for me, and I believe that this is important accessibility feature. I hope that I can do all parts of it. So, if you approve it, and you think that we need explicit toggle also - maybe we can start with this toggle design. What is the appropriate position? At the bottom of every page? At the top? In some preferences screen?

@vitaly-zdanevich

This comment has been minimized.

Copy link
Contributor Author

@vitaly-zdanevich vitaly-zdanevich commented Oct 1, 2019

In "Material" style, with label Dark theme at the left? Maybe not blue but gray.

toggle

Or maybe as a link, where text will be Dark mode off and Dark mode on:
image

@jayschwa

This comment has been minimized.

Copy link
Contributor

@jayschwa jayschwa commented Oct 1, 2019

We would not want to force dark mode users to only see the dark mode version, so we’d want a toggle.

If the user doesn't want to see dark mode, they can change the setting in their user agent or operating system. Adding a toggle on the website seems redundant.

@andybons

This comment has been minimized.

Copy link
Member

@andybons andybons commented Oct 1, 2019

@jayschwa I disagree. It’s not clear what user expectations are across the web with regard to this.

@vitaly-zdanevich

This comment has been minimized.

Copy link
Contributor Author

@vitaly-zdanevich vitaly-zdanevich commented Oct 1, 2019

White theme is default on macOS and Firefox - if user manually changed it to dark - maybe he will not like to see that most of websites still white.

Screenshot from Firefox under Ubuntu:
Screenshot_2019-10-01_20-27-06

@vitaly-zdanevich

This comment has been minimized.

Copy link
Contributor Author

@vitaly-zdanevich vitaly-zdanevich commented Oct 1, 2019

Also Chromium from 73 became dark automatically if user switch dark mode inside operating system.

@andybons

This comment has been minimized.

Copy link
Member

@andybons andybons commented Oct 1, 2019

Dark mode, as a feature on the web, is very new. As I said above, we don’t have a thorough understanding of user expectations yet. I don’t think we can entertain this without a toggle.

@vitaly-zdanevich

This comment has been minimized.

Copy link
Contributor Author

@vitaly-zdanevich vitaly-zdanevich commented Oct 2, 2019

Ok, so - I do not know your rules how you make decisions. We need to wait for other members to vote? For me this is not important - with or without toggle, I can implement both variants.

@ALTree

This comment has been minimized.

Copy link
Member

@ALTree ALTree commented Oct 2, 2019

Before deciding about the toggle, shouldn't we decide whether we want a dark mode at all?

I've read https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme, but nothing there says every website must have a dark mode. So why it's a given that we want one?

@vitaly-zdanevich

This comment has been minimized.

Copy link
Contributor Author

@vitaly-zdanevich vitaly-zdanevich commented Oct 2, 2019

We need dark mode for two reasons:

  1. Because of sensitive eyes phenomena. For many people (including me) it is hurts to stairs at toxic WHITE. Especially at night, low-light conditions.

  2. Save the battery.

Android 10 also have system wide dark theme for the same reasons. I remember that in this year (or in 2018, I do not remember) Google at Android conference said that this is recommended to have optional dark theme for every app.

And with this new prefers-color-scheme - if user agent says that he prefers dark mode - why we should ignore that?

@StefMa

This comment has been minimized.

Copy link

@StefMa StefMa commented Oct 6, 2019

On Android most apps have their own settings like

  • Dark mode on
  • Dark mode off
  • System defaults

Would this be an option for a website as well? So instead of a toggle implementing a spinner?

The default one should then respect the operation defaults (or browser defaults) - not sure about the specification 😅.

@rsc

This comment has been minimized.

Copy link
Contributor

@rsc rsc commented Oct 9, 2019

What if we just make the web site gray on gray? Then it will work equally well in both modes.

@rsc

This comment has been minimized.

Copy link
Contributor

@rsc rsc commented Oct 9, 2019

More seriously, it seems like the web as a whole needs to figure out what the expectation is for default-white web sites (which is most of them, right?). In general we have a lot of web design work that goes into the pages, so it's not like we can just make up some hex codes and add a switch. Having two modes doubles the design work and adds complexity.

Let's wait on doing anything on this until more sites have figured out what to do. For example, google.com is still white in dark mode. If that changes, then I'd be more inclined to look into what golang.org should do.

@rsc rsc changed the title x/website: add dark (night) theme proposal: x/website: add dark (night) theme Oct 9, 2019
@gopherbot gopherbot added Proposal and removed NeedsDecision labels Oct 9, 2019
@rsc rsc added the Proposal-Hold label Oct 9, 2019
@rsc rsc modified the milestones: Unreleased, Proposal Oct 9, 2019
@StefMa

This comment has been minimized.

Copy link

@StefMa StefMa commented Oct 29, 2019

@vitaly-zdanevich

This comment has been minimized.

Copy link
Contributor Author

@vitaly-zdanevich vitaly-zdanevich commented Oct 29, 2019

My pull request to gobyexample.com with optional dark theme through prefers-color-scheme.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
9 participants
You can’t perform that action at this time.