Support dark mode

[eXpire163]

Providing a dark version of https://github.com/google/docsy/blob/master/assets/scss/_variables.scss would be great

---

Edits (@chalin)

Prep

• Style adjustments in prep for dark mode support #1908

Tasks

• Color-mode / dark-mode support #1909
• [Dark-mode] Tweak of param, file and resource names #1913
• Light/dark-mode dropdown isn't visible under narrow displays #1916
  [Dark-mode] Fixes for mobile #1917
• [Dark-mode] Use default BS nav-item padding #1919
• [UG] Explain how to enable the light/dark-mode menu #1914
• [UG] Syntax highlighting styles for both light and dark modes #1958
• [Dark mode] Factor out code-dark styles for reuse #1959
  • Rename chroma styles #1974
• [CI] Add scripts to generate and check Chroma styles #1976
• Document how to ensure that code highlighting is fully compatible with dark mode #1957

Adjustments that will be required to Docsy element styling in support of Bootstrap's dark mode:

• Search input to for for navbar; and left-nav in both light and dark modes
  [BS5.3] Replace .navbar-dark by data attribute and other style adjustments #1896
  • [Dark mode] Text in the navbar search is dark under FireFox #1906
• Left nav entry colors -- the text style isn't appropriate for dark mode
  Style adjustments in prep for dark mode support #1908
• Alert backgrounds -- the bg style isn't appropriate for dark mode
  Style adjustments in prep for dark mode support #1908
• Card background -- e.g., see Shortcode card: programming code - [Dark-mode] Card shortcode style fixes #1922
• Pageinfo backgrounds - Adjust pageinfo bg to be compatible with dark-mode #1915
• Tabbed pane backgrounds - [Dark-mode] Tabbed panes fix #1920
• [Dark mode] Left-nav and taxonomy color fixes #1952
  • Light/dark mode: display of tags/categories #1927
  • [Dark mode] Left-nav color and contrast adjustments are needed #1943
• Mermaid: support dark mode #1961
• .td-box-*:
  • .td-box--white should be dark-mode compatible #1967
  • White blocks/lead down arrow doesn't match dark-mode colors #1970
• [Dark mode] blockquote and click-to-copy color fixes #1981

[huehnerlady]

Any update on this? Would love that feature to be available 😍

[frodriguezsmartclip]

Someone could add that feature to Docsy, It seems not to hard to do it: GoogleContainerTools/skaffold@ccdffd1

If I have time, I'll try to code it ⚡

[bwplotka]

Help wanted, that would be pretty epic to see! 🤗

[narrenfrei]

I have tried to implement the above mentioned - I would call it - "darkmode hack" ;-) and made a PR with the WIP flag #563
You can have a look on the result at: https://deploy-preview-563--docsydocs.netlify.app/

In my opinion, the result generated by the snippets from GoogleContainerTools/skaffold@ccdffd1 is ... - yes it's dark and it's a mode and it's really quick to implement ;-)

I think, if we really want a darkmode, it would be better to write an separate _variables.scss to define the colors by hand.

Any other comments?

[narrenfrei]

After reading a little more into the dark mode topic, I'm afraid that a "useful implementation" will require a little more work (and discussion). A few thoughts from me:

• The dark mode hack from GoogleContainerTools/skaffold@ccdffd1 can be installed quite quickly (see WIP: try darkmode hack #331 #563).
• But if you want a dark mode with individually definable stylesheet, you would need some modifications to the previous structure of Docsy.
  • Docsy uses Bootstrap and therefore SCSS. The move to Bootstrap v5 is likely to be around the corner. -> Maybe wait for the change?
  • A dark mode should remain optional for Docsy users and the visitors of Docsy sites.
  • The style sheets for dark mode should remain easy to maintain and adaptable.
  • I think, the most elegant way for the implementation would be CSS variables whose browser support is not yet the best and also Bootstrap (as far as I know) are still used rather sparingly.
  • Since many developers (with different code habits) work on Docsy, the color definitions are in many different files (partly also in CSS and not just SCSS files). Which is why, a complete dark version of the generated CSS file would have to be created and still remnants of light colors would probably be retained somewhere.

That's why I would wait to develop a dark mode with my own stylesheet until Docsy switches to Bottstrap 5 and then use the approach from https://github.com/vinorodrigues/bootstrap-dark-5. If you can live with the above dark mode hack (GoogleContainerTools/skaffold@ccdffd1), you can use my PR #563 as a template.

Any thoughts / suggestions / ideas?

[narrenfrei]

Is there any more need or interest for the PR #563?
If not, I will close it.

[narrenfrei]

As nobody showed further interest, I'll close this PR #563.

[bwplotka]

Thanks a lot for your attempt @narrenfrei - I would definitely love dark mode, but it sounds like separate scss might be a better way 🤔

[amirootyet]

sounds like for properly implementing the dark mode, Docsy would first need to be upgraded to Bootstrap 5? I'm interested in the dark mode and before I go spinning off my own, I wanted to see if this is already in the works!

[abitrolly]

jenkins-x/jx-docs#3053 is how it is done on https://jenkins-x.io/

[abitrolly]

Based on jx experience, dark mode is not trivial, because it requires processing images to be compatible with the dark mode. I could not find a way to make them dark mode friendly with just plain CSS. Some guidelines would be nice. And I could not find a way of switching images with CSS, so it will probably require a different way of generating HTML.

---

So far it is the most voted issue in this repo. Would be nice if Google folks (@LisaFC, @chalin ?) could escalate this internally to give it a proper frontend engineering.

[lawxen]

After reading a little more into the dark mode topic, I'm afraid that a "useful implementation" will require a little more work (and discussion). A few thoughts from me:

• The dark mode hack from GoogleContainerTools/skaffold@ccdffd1 can be installed quite quickly (see WIP: try darkmode hack #331 #563).

• But if you want a dark mode with individually definable stylesheet, you would need some modifications to the previous structure of Docsy.

  • Docsy uses Bootstrap and therefore SCSS. The move to Bootstrap v5 is likely to be around the corner. -> Maybe wait for the change?
  • A dark mode should remain optional for Docsy users and the visitors of Docsy sites.
  • The style sheets for dark mode should remain easy to maintain and adaptable.
  • I think, the most elegant way for the implementation would be CSS variables whose browser support is not yet the best and also Bootstrap (as far as I know) are still used rather sparingly.
  • Since many developers (with different code habits) work on Docsy, the color definitions are in many different files (partly also in CSS and not just SCSS files). Which is why, a complete dark version of the generated CSS file would have to be created and still remnants of light colors would probably be retained somewhere.

That's why I would wait to develop a dark mode with my own stylesheet until Docsy switches to Bottstrap 5 and then use the approach from https://github.com/vinorodrigues/bootstrap-dark-5. If you can live with the above dark mode hack (GoogleContainerTools/skaffold@ccdffd1), you can use my PR #563 as a template.

Any thoughts / suggestions / ideas?

The latest docsy has been moved to bootstrap5, so can we use https://github.com/vinorodrigues/bootstrap-dark-5 now?

[jmichelgarcia]

👀

[chalin]

Direct link to the BS page: https://getbootstrap.com/docs/5.3/customize/color-modes/#dark-mode

[chalin]

With #1981, I consider this implemented.