search

yursan9 / manis-hugo-theme

Sweet little Hugo's theme for personal website
https://themes.gohugo.io/manis-hugo-theme/
MIT License
117 stars 52 forks source link

[feat] Add dark mode support #22

Closed jerrylususu closed 2 years ago

jerrylususu commented 2 years ago

Hi! I found your great theme, and tried to add an experimental dark mode support using CSS filters, which uses the system dark mode setting as default value while also remembering users' manual preference. Users can toggle dark mode using the little "sun/moon" icon in the navbar. Previously I am thinking just using the custom CSS support built in the theme, but I feel that this should be a theme-level support for such an essential function.

Most of the code comes from this post: https://radu-matei.com/blog/dark-mode/ , and the moon & sun icon is from font-awesome. As font-awesome requires credit link to their license page, there may need some work on README.md to include that.

Still I would like some response, to see if I am working towards the right direction. I am mostly a backend developer and haven't touch frontend code much, so please don't hesitate to provide editing suggestions.

Here are some screenshots:

Home Page image

Article Page (Notice that images are not effected) image

Code highlight & Code block image

jerrylususu commented 2 years ago

Hi! Thanks for your reply. I just added the required license comments. Please have a look.