DevelopersHandbook icon indicating copy to clipboard operation
DevelopersHandbook copied to clipboard

Ability to have a 'dark mode' for the handbook

Open luzpaz opened this issue 2 years ago • 5 comments

Handbook as it now is bright white. It also isn't playing nice with the https://darkreader.org/ extension.

luzpaz avatar Mar 29 '23 02:03 luzpaz

Can you give it a look now and see if it's any better? We switched the theme to one that might be better.

chennes avatar Mar 29 '23 16:03 chennes

Yes, much better!

It would be still nice to have some sort of js that toggles full dark mode. Would that be OK to have as a feature ?

luzpaz avatar Mar 30 '23 11:03 luzpaz

I don't know if it's possible, this is an automatically-generated website created from Markdown files. Can you find another GitHub Site where they do such a thing?

chennes avatar Mar 30 '23 11:03 chennes

If you use the TailwindCSS framework for styling, this is trivial. Depending on a LocalStorage variable it adds a global dark class to the <html> DOM element. This setting can be switched with some simple JS, respecting the system settings for dark/light or explicitly using the user settings for this website. Here is an example of a Hugo based static website, were I added this functionality. Could be used if there is Jekyll theme using TailwindCSS.

-> https://github.com/dirkolbrich/hugo-tailwindcss-starter-theme/commit/84a5cefea39a33b7a6c245dcc66133c2373e7459

dirkolbrich avatar Apr 03 '23 10:04 dirkolbrich

found an example on how to setup a Github page with TailwindCSS -> https://github.com/harrywang/tailpages Will try a mock-up in a separate branch.

dirkolbrich avatar Apr 07 '23 13:04 dirkolbrich