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

• [x] #1908

Tasks

• [x] #1909
• [x] #1913
• [x] #1916 #1917
• [x] #1919
• [x] #1914
• [x] #1958
• [x] #1959
• [ ] #1957

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

• [x] Search input to for for navbar; and left-nav in both light and dark modes #1896
  • [x] #1906
• [x] Left nav entry colors -- the text style isn't appropriate for dark mode #1908
• [x] Alert backgrounds -- the bg style isn't appropriate for dark mode #1908
• [x] Card background -- e.g., see Shortcode card: programming code - #1922
• [x] Pageinfo backgrounds - #1915
• [x] Tabbed pane backgrounds - #1920
• [x] #1952
  • [x] #1927
  • [x] #1943
• [x] #1961
• [x] .td-box-*:
  • [x] #1967
  • [x] #1970
• [ ] Blockquote

[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: https://github.com/GoogleContainerTools/skaffold/pull/5364/commits/ccdffd1e27785b203f953dd9b8b8735972ca5d99

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 https://github.com/GoogleContainerTools/skaffold/commit/ccdffd1e27785b203f953dd9b8b8735972ca5d99 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 https://github.com/GoogleContainerTools/skaffold/commit/ccdffd1e27785b203f953dd9b8b8735972ca5d99 can be installed quite quickly (see #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 (https://github.com/GoogleContainerTools/skaffold/commit/ccdffd1e27785b203f953dd9b8b8735972ca5d99), 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]

https://github.com/jenkins-x/jx-docs/pull/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.