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.

Sign up for GitHub

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

Jump to bottom

New dark mode on docs flashes white background when switching pages #14492

Closed
felixfbecker opened this issue Oct 7, 2020 · 5 comments · Fixed by #14586
Closed

New dark mode on docs flashes white background when switching pages #14492

felixfbecker opened this issue Oct 7, 2020 · 5 comments · Fixed by #14586
Assignees
@sqs
Labels
docs-ux User experience of our docs (not doc content-related)

Comments

@felixfbecker
Copy link
Contributor

2020-10-07 22 49 07
@felixfbecker felixfbecker added the docs-ux User experience of our docs (not doc content-related) label Oct 7, 2020
@sqs
Copy link
Member

sqs commented Oct 7, 2020

I think I need to move the script tag to the head so it doesn't render the first frame pre-styling. Thanks for filing.

@felixfbecker
Copy link
Contributor Author

We could also remove the theme switcher and make it CSS-only :)
Would allow us to send a <meta> tag too to have the browser pick better default colors and to easily include screenshots for both themes using <picture>.

@sqs
Copy link
Member

sqs commented Oct 7, 2020

I like the switcher, personally. People get confused without it in my experience - thinking they are on a different site when they visit on another device, for example. I wish browsers had a native control for this.

Re: screenshot, would that be for opengraph?

@felixfbecker
Copy link
Contributor Author

felixfbecker commented Oct 10, 2020 •
edited

People get confused without it in my experience - thinking they are on a different site when they visit on another device, for example.

Interesting, I've never felt this way myself or heard that from anyone. As a data point, Twitter adapts to the system light/dark theme, but the manual override toggle is burried deep in the account settings (i.e. not visible on the home page). Obviously Twitter is more recognizable but the general website behavior is present on popular sites too.

I wish browsers had a native control for this.

Same, I wish the browser would allow to "override" the system theme through it's UI and remember the choice per-site, the same way it remembers zoom levels per site. That way we wouldn't ever have to implement toggles and could use CSS directly for everything.

Re: screenshot, would that be for opengraph?

No, to have screenshots of the product that match the doc's theme. I was referring to this technique:

https://github.com/sourcegraph/sourcegraph-code-stats-insights/blob/9d128789fb363a08c21a7a35f8dd94af671da496/README.md#L6-L10

Check it out on https://sourcegraph.com/extensions/sourcegraph/code-stats-insights when switching the OS theme.

Would be possible with some CSS classes too of course.

The <meta> tag I was referring to is

  <meta name="color-scheme" content="dark light">

which lets the browser select a dark default background color for <body> before CSS is loaded, form elements etc.

sqs added a commit that referenced this issue Oct 10, 2020
@sqs
fix white flash on docsite in dark theme
76f8b4c 
fix #14492

- Load script in head
- Pin pixel height of logo to reduce jitter
@sqs sqs mentioned this issue Oct 10, 2020
Merged
@sqs
Copy link
Member

sqs commented Oct 10, 2020

I didn't know about the color-scheme meta tag - neat. And yeah, it would be great if our screenshots adapted to the theme. I fixed the immediate issue in #14586, and we can do the other things later.

sqs added a commit that referenced this issue Oct 10, 2020
@sqs
fix white flash on docsite in dark theme (#14586)
d947204 
fix #14492

- Load script in head
- Pin pixel height of logo to reduce jitter
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@sqs sqs

Labels
docs-ux User experience of our docs (not doc content-related)
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix white flash on docsite in dark theme sourcegraph/sourcegraph
2 participants
@sqs @felixfbecker