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

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

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

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

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

Comments

@vitaly-zdanevich
Copy link
Contributor

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
Copy link
Contributor

agnivade commented Sep 30, 2019

@andybons

@bcmills bcmills added FeatureRequest NeedsDecision Feedback is required from experts, contributors, and/or the community before a change can be made. labels 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
Copy link
Member

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
Copy link
Contributor Author

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
Copy link
Contributor Author

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
Copy link
Contributor

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
Copy link
Member

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
Copy link
Contributor Author

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
Copy link
Contributor Author

vitaly-zdanevich commented Oct 1, 2019

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

@andybons
Copy link
Member

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
Copy link
Contributor Author

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
Copy link
Member

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
Copy link
Contributor Author

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
Copy link

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
Copy link
Contributor

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
Copy link
Contributor

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 Feedback is required from experts, contributors, and/or the community before a change can be made. labels Oct 9, 2019
@rsc rsc modified the milestones: Unreleased, Proposal Oct 9, 2019
@StefMa
Copy link

StefMa commented Oct 29, 2019

@vitaly-zdanevich

This comment has been minimized.

@gopherbot
Copy link

gopherbot commented Mar 10, 2022

Change https://go.dev/cl/391535 mentions this issue: _content/css: improve contrast for playground and dark theme elements

gopherbot pushed a commit to golang/website that referenced this issue Mar 10, 2022
For golang/go#34601.
Fixes golang/go#51584.

Change-Id: I0a1715eacb5e3cef51aff7285dbdf9a0a5a6ea3c
Reviewed-on: https://go-review.googlesource.com/c/website/+/391535
Run-TryBot: Jamal Carvalho <jamal@golang.org>
Reviewed-by: Dmitri Shuralyov <dmitshur@google.com>
TryBot-Result: Gopher Robot <gobot@golang.org>
Trust: Jamal Carvalho <jamalcarvalho@google.com>
@gopherbot
Copy link

gopherbot commented Mar 10, 2022

Change https://go.dev/cl/391517 mentions this issue: static/frontend: share color scheme preference across go.dev domains

@gopherbot
Copy link

gopherbot commented Mar 14, 2022

Change https://go.dev/cl/392479 mentions this issue: _content/css: fix image background color in dark mode

@ianlancetaylor
Copy link
Contributor

ianlancetaylor commented Mar 17, 2022

It's almost 2 1/2 years later, taking off hold for reconsideration.

@rsc
Copy link
Contributor

rsc commented Mar 23, 2022

The web team has looked into this as part of a larger redesign and has the work pending. I don't think this needs further discussion.

@rsc rsc moved this from Incoming to Likely Accept in Proposals (old) Mar 23, 2022
@rsc
Copy link
Contributor

rsc commented Mar 23, 2022

Based on the discussion above, this proposal seems like a likely accept.
— rsc for the proposal review group

@rsc rsc moved this from Likely Accept to Accepted in Proposals (old) Mar 30, 2022
@rsc
Copy link
Contributor

rsc commented Mar 30, 2022

No change in consensus, so accepted. 🎉
This issue now tracks the work of implementing the proposal.
— rsc for the proposal review group

@rsc rsc changed the title proposal: x/website: add dark (night) theme x/website: add dark (night) theme Mar 30, 2022
@rsc rsc modified the milestones: Proposal, Backlog Mar 30, 2022
owenthereal pushed a commit to owenthereal/website that referenced this issue Mar 31, 2022
Transparent images on the doc pages assume there is a white background.
This change preserves the white background for images when the site is
viewed with the dark theme.

For golang/go#34601.

Change-Id: I4c0a28d173d7ecf52547da6e5a6382d84bc922e3
Reviewed-on: https://go-review.googlesource.com/c/website/+/392479
Run-TryBot: Jamal Carvalho <jamal@golang.org>
TryBot-Result: Gopher Robot <gobot@golang.org>
Reviewed-by: Dmitri Shuralyov <dmitshur@google.com>
Trust: Jamal Carvalho <jamalcarvalho@google.com>
@dmitshur dmitshur modified the milestones: Backlog, Unreleased Apr 6, 2022
gopherbot pushed a commit to golang/pkgsite that referenced this issue Apr 7, 2022
With dark mode added to go.dev in CL 391536 we can update the cookie
to apply the cookie to both pkg.go.dev and go.dev.

For golang/go#34601.

Change-Id: I49b50241f9e57ede369260aeb52512aebef88239
Reviewed-on: https://go-review.googlesource.com/c/pkgsite/+/391517
Trust: Jamal Carvalho <jamal@golang.org>
Run-TryBot: Jamal Carvalho <jamal@golang.org>
Reviewed-by: Jonathan Amsterdam <jba@google.com>
TryBot-Result: kokoro <noreply+kokoro@google.com>
gopherbot pushed a commit to golang/website that referenced this issue Apr 7, 2022
Added a toggle button with three states: auto, light, and dark
to set the preferred color scheme of go.dev.

For golang/go#34601.

Change-Id: I771f64f34294fa0a86bbcdd6c0acaa4af7e7cf8c
Reviewed-on: https://go-review.googlesource.com/c/website/+/391536
Run-TryBot: Jamal Carvalho <jamal@golang.org>
Reviewed-by: Dmitri Shuralyov <dmitshur@google.com>
TryBot-Result: Gopher Robot <gobot@golang.org>
Reviewed-by: Jamal Carvalho <jamalcarvalho@google.com>
@jamalc
Copy link

jamalc commented Apr 7, 2022

Try out the dark theme today on go.dev. We'll leave this issue open for minor issues discovered post launch.

@gopherbot
Copy link

gopherbot commented Apr 7, 2022

Change https://go.dev/cl/398974 mentions this issue: _content/css: use color variables in download table

gopherbot pushed a commit to golang/website that referenced this issue Apr 7, 2022
For the text in the download table to be visible for all
themes the row background color must switch with the
page theme.

For golang/go#34601

Change-Id: I369445f25efc3b3771f324f1c0555f9049cf3390
Reviewed-on: https://go-review.googlesource.com/c/website/+/398974
Trust: Jamal Carvalho <jamal@golang.org>
Run-TryBot: Jamal Carvalho <jamal@golang.org>
Reviewed-by: Jonathan Amsterdam <jba@google.com>
TryBot-Result: Gopher Robot <gobot@golang.org>
Auto-Submit: Jamal Carvalho <jamal@golang.org>
Reviewed-by: Russ Cox <rsc@golang.org>
passionSeven added a commit to passionSeven/website that referenced this issue Oct 18, 2022
Added dark mode styles and images.

For golang/go#34601

Change-Id: I1a4d9599cbe8e3b51380be914cfe1abbc3cd79bb
Reviewed-on: https://go-review.googlesource.com/c/website/+/384874
Reviewed-by: Jamal Carvalho <jamalcarvalho@google.com>
Trust: Dmitri Shuralyov <dmitshur@google.com>
passionSeven added a commit to passionSeven/website that referenced this issue Oct 18, 2022
For golang/go#34601.
Fixes golang/go#51584.

Change-Id: I0a1715eacb5e3cef51aff7285dbdf9a0a5a6ea3c
Reviewed-on: https://go-review.googlesource.com/c/website/+/391535
Run-TryBot: Jamal Carvalho <jamal@golang.org>
Reviewed-by: Dmitri Shuralyov <dmitshur@google.com>
TryBot-Result: Gopher Robot <gobot@golang.org>
Trust: Jamal Carvalho <jamalcarvalho@google.com>
passionSeven added a commit to passionSeven/website that referenced this issue Oct 18, 2022
Transparent images on the doc pages assume there is a white background.
This change preserves the white background for images when the site is
viewed with the dark theme.

For golang/go#34601.

Change-Id: I4c0a28d173d7ecf52547da6e5a6382d84bc922e3
Reviewed-on: https://go-review.googlesource.com/c/website/+/392479
Run-TryBot: Jamal Carvalho <jamal@golang.org>
TryBot-Result: Gopher Robot <gobot@golang.org>
Reviewed-by: Dmitri Shuralyov <dmitshur@google.com>
Trust: Jamal Carvalho <jamalcarvalho@google.com>
passionSeven added a commit to passionSeven/website that referenced this issue Oct 18, 2022
Added a toggle button with three states: auto, light, and dark
to set the preferred color scheme of go.dev.

For golang/go#34601.

Change-Id: I771f64f34294fa0a86bbcdd6c0acaa4af7e7cf8c
Reviewed-on: https://go-review.googlesource.com/c/website/+/391536
Run-TryBot: Jamal Carvalho <jamal@golang.org>
Reviewed-by: Dmitri Shuralyov <dmitshur@google.com>
TryBot-Result: Gopher Robot <gobot@golang.org>
Reviewed-by: Jamal Carvalho <jamalcarvalho@google.com>
passionSeven added a commit to passionSeven/website that referenced this issue Oct 18, 2022
For the text in the download table to be visible for all
themes the row background color must switch with the
page theme.

For golang/go#34601

Change-Id: I369445f25efc3b3771f324f1c0555f9049cf3390
Reviewed-on: https://go-review.googlesource.com/c/website/+/398974
Trust: Jamal Carvalho <jamal@golang.org>
Run-TryBot: Jamal Carvalho <jamal@golang.org>
Reviewed-by: Jonathan Amsterdam <jba@google.com>
TryBot-Result: Gopher Robot <gobot@golang.org>
Auto-Submit: Jamal Carvalho <jamal@golang.org>
Reviewed-by: Russ Cox <rsc@golang.org>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Status: Accepted
Development

No branches or pull requests