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/pkgsite: add support for dark mode #36980

Closed
A-UNDERSCORE-D opened this issue Feb 2, 2020 · 23 comments
Closed

x/pkgsite: add support for dark mode #36980

A-UNDERSCORE-D opened this issue Feb 2, 2020 · 23 comments
Labels
FeatureRequest NeedsFix The path to resolution is known, but the work has not been done. pkgsite/frontend Issues related to pkgsite HTML/CSS/JavaScript and frontend development pkgsite UX Issues that involve UXD/UXR input

Comments

@A-UNDERSCORE-D
Copy link

What is the URL of the page with the issue?

All Pages (noticed explicitly on my first use, which was os.ProcessState.Success)

What is your user agent?

Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:72.0) Gecko/20100101 Firefox/72.0

What did you expect to see?

Support for my already configured system wide dark mode (via CSS prefers-colour-scheme)

Or at the very least a toggle button somewhere to enable something less eye-searing for those of us working at night or in the dark

What did you see instead?

I didnt. I was blinded.

But in all seriousness, a beautifully designed, if bright white docs page. Which instantly clashed with the rest of my system as it is configured to have a dark GTK theme, et al.

On the old godoc.org, I managed this though a stylus theme, but I'd much rather have first party support on pkg.go.dev.

@ALTree ALTree added the pkgsite label Feb 3, 2020
@julieqiu julieqiu changed the title go.dev: Dark Mode/Theme go.dev: add support for dark mode Feb 3, 2020
@julieqiu
Copy link
Member

julieqiu commented Feb 3, 2020

/cc @andybons @dmitshur

@cagedmantis cagedmantis added this to the Backlog milestone Feb 3, 2020
@toothrot toothrot added the NeedsInvestigation Someone must examine and confirm this is a valid issue and not a duplicate of an existing one. label Feb 6, 2020
@toothrot toothrot modified the milestones: Backlog, Unreleased Feb 6, 2020
@julieqiu
Copy link
Member

We're currently discussing this request with our UX team, along with other design feedback we've received for the site. We want to review design feedback we have received as part of a broader redesign, as opposed to make piecemeal decisions. I'll update this issue once we have decided on any changes.

/cc @fflewddur

@julieqiu julieqiu added OS-Linux UX Issues that involve UXD/UXR input and removed OS-Linux labels Feb 28, 2020
@julieqiu julieqiu changed the title go.dev: add support for dark mode x/pkgsite: add support for dark mode Jun 15, 2020
@julieqiu julieqiu modified the milestones: Unreleased, pkgsite/frontend Aug 27, 2020
@Fusl
Copy link

Fusl commented Dec 20, 2020

This isn't just about "the memes", this is about people suffering from light sensitivity or photophobia.

@andybons
Copy link
Member

andybons commented Dec 21, 2020

Folks, unless there’s something new to add, please upvote the original issue description instead of commenting with support.

Per golang.org/wiki/NoPlusOne.

@ewen-lbh
Copy link

ewen-lbh commented May 22, 2021

Here's a set of css rules that switches pkg.go.dev to dark mode, it was pretty quick to make thanks to the use of CSS variables!
Could be used as a starting point or (more likely) for folks who can't wait for this issue to be resolved. Of course it's not perfect (namely the fade overlay for a collapsed README section is awful), but it gets the job done:

image

I tested it on qutebrowser v2.2.1 (QtWebEngine 5.15.3, Chromium 87.0.4280.144)

Here's the gist: https://gist.github.com/ewen-lbh/d486b8fd662208d9019cf12b6a47caba

Note: I didn't do it yet, but wrapping the whole ruleset in a @media prefers-color-scheme would be a good idea.

@gopherbot
Copy link

Change https://golang.org/cl/326055 mentions this issue: content,internal: prepare unit page for dark theme

@gopherbot
Copy link

Change https://golang.org/cl/326054 mentions this issue: content,internal: prepare unit tabs for dark theme

@gopherbot
Copy link

Change https://golang.org/cl/326053 mentions this issue: content,internal: prepare search page for dark theme

@gopherbot
Copy link

Change https://golang.org/cl/326052 mentions this issue: content,internal: prepare fetch page for dark theme

@gopherbot
Copy link

Change https://golang.org/cl/326050 mentions this issue: content,internal: prepare badge page for dark theme

@gopherbot
Copy link

Change https://golang.org/cl/332491 mentions this issue: static/{frontend,shared}: enable dark theme

@jamalc
Copy link

jamalc commented Jul 14, 2021

Dark theme is now live on pkg.go.dev and will change based on the systems preferred color scheme.

@jamalc jamalc closed this as completed Jul 14, 2021
@A-UNDERSCORE-D
Copy link
Author

Looks great!

@mrg0lden
Copy link

It was working on my machine yesterday, but today it doesn't 🤔

@jspc
Copy link

jspc commented Jul 27, 2021

Is there any way to toggle it? I'm kinda in the opposite boat- I struggle with contrast, so I have dark mode at the system level so I can make out system menus better, and then use light mode on sites so I can read pages easier.

@cespare
Copy link
Contributor

cespare commented Jul 27, 2021

The deprecated tag could use some work in dark mode.

screen_20210727014546

@A-UNDERSCORE-D
Copy link
Author

Is there any way to toggle it? I'm kinda in the opposite boat- I struggle with contrast, so I have dark mode at the system level so I can make out system menus better, and then use light mode on sites so I can read pages easier.

firefox has a thing to override the theme sent to websites in about:config AFAIK

@julieqiu
Copy link
Member

Is there any way to toggle it? I'm kinda in the opposite boat- I struggle with contrast, so I have dark mode at the system level so I can make out system menus better, and then use light mode on sites so I can read pages easier.

You can press t to toggle dark mode. This will be documented (#47421).

The deprecated tag could use some work in dark mode.

@cespare - since this issue is closed, would you mind filing a new issue?

@cespare
Copy link
Contributor

cespare commented Jul 27, 2021

I'll leave it to someone more motivated about dark mode.

@cameronelliott
Copy link

I accidentally hit 't' (not knowing I had hit 't') and entered the one-way dark-mode.
Maybe a sun/moon toggle or something so people don't have to clear their cookies would be nice?

@bombela
Copy link

bombela commented Sep 14, 2021

Press t until the setting becomes auto again. You can observe the current state by pressing ?.

@hyangah hyangah added the pkgsite/frontend Issues related to pkgsite HTML/CSS/JavaScript and frontend development label May 20, 2022
@rsc rsc unassigned jamalc Jun 23, 2022
@eliasp
Copy link

eliasp commented Apr 24, 2023

Is this supposed to be still working? It's bright-white for me...

  • Neither ? shows it as available option, nor does t have any effect.
  • My Theme preference in Firefox (112.0.1, Win10) is set to "Dark".
  • I don't have any AddOns that influence a site's CSS like "Dark Reader" installed.

@dmitshur
Copy link
Contributor

@eliasp Yes, it's still supported and should work.

Scroll to the bottom and look for a sun/moon/halfway icon. Clicking it will toggle between light, dark, and auto modes:

image

(The t key was used temporary during development and has no effect now.)

If it's still not working or you're seeing some problem, please file a new issue. Thanks.

@dmitshur dmitshur added NeedsFix The path to resolution is known, but the work has not been done. and removed NeedsInvestigation Someone must examine and confirm this is a valid issue and not a duplicate of an existing one. labels Apr 25, 2023
@golang golang locked as resolved and limited conversation to collaborators Apr 25, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
FeatureRequest NeedsFix The path to resolution is known, but the work has not been done. pkgsite/frontend Issues related to pkgsite HTML/CSS/JavaScript and frontend development pkgsite UX Issues that involve UXD/UXR input
Projects
None yet
Development

No branches or pull requests