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

Ability to have a 'dark mode' for the handbook #6

Open
luzpaz opened this issue Mar 29, 2023 · 5 comments
Open

Ability to have a 'dark mode' for the handbook #6

luzpaz opened this issue Mar 29, 2023 · 5 comments

Comments

@luzpaz
Copy link

luzpaz commented Mar 29, 2023

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

chennes commented Mar 29, 2023

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

@luzpaz
Copy link
Author

luzpaz commented Mar 30, 2023

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 ?

@chennes
Copy link
Member

chennes commented Mar 30, 2023

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?

@dirkolbrich
Copy link
Contributor

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.

-> dirkolbrich/hugo-tailwindcss-starter-theme@84a5cef

@dirkolbrich
Copy link
Contributor

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@chennes @dirkolbrich @luzpaz