search

athul / archie

A minimal Hugo Theme
https://athul.github.io/archie
MIT License
973 stars 297 forks source link

Dark Mode Toggle #13

Closed athul closed 2 years ago

athul commented 3 years ago

Currently the Light Mode to Dark mode switching is based on system theme. Implementing a Toggle would be easier for users to switch between the theme.

fami-fish commented 3 years ago

can i do this?

athul commented 3 years ago

Sure

martinbaillie commented 3 years ago

This would be great @Spoon-8285! It is always nice to give the user a choice on top of the OS-inferred c.f. https://hankchizljaw.com/wrote/create-a-user-controlled-dark-or-light-mode/

yhau1989 commented 3 years ago

2020-10-23_02 01 09 I worked in a demo

yhau1989 commented 3 years ago

@athul review my pull request f2032af4d998e5eb41e01c24014e0db22d81c343

2020-10-23_02 01 09 I worked in a demo

joaopgrassi commented 3 years ago

I'm more of a fan of icons like this: image https://adityatelange.github.io/hugo-PaperMod/

yhau1989 commented 3 years ago

awesome @joaopgrassi :+1:

RobbiNespu commented 3 years ago

Currently the Light Mode to Dark mode switching is based on system theme. Implementing a Toggle would be easier for users to switch between the theme.

Take a look on https://github.com/googlechromelabs/dark-mode-toggle Some fork implement it well, but it not clean commit https://github.com/fma16/archie/commit/dad5309dca646bb4aa82d140a46fe8a7b6996565 https://github.com/fma16/archie/commit/7fbeb6019c7193216b2a834889cab317ae597ae8 https://github.com/fma16/archie/commit/5c07b046e930778c794c6af74e73f07a62d6712c https://github.com/fma16/archie/commit/2148118607d8f6ebfbfc63ef7fe06ac00b67a44a

Demo : his website https://lawgier.net/ (toggle at the bottom)

RobbiNespu commented 3 years ago

If anyone interested, take look on https://github.com/RobbiNespu/archie/pull/4/files it worked well when you are using light mode manual or light mode manual files: https://github.com/RobbiNespu/archie/commit/57fafb81d69d624dd0d4a564b8c63ee13a7b869b https://github.com/RobbiNespu/archie/commit/60230c30eabcc3330bd38ddec8480e74b4629f8b

My code are messy, someone good with js and css maybe can do better

athul commented 3 years ago

If anyone interested, take look on https://github.com/RobbiNespu/archie/pull/4/files it worked well when you are using light mode manual or light mode manual

My code are messy, someone good with js and css maybe can do better

Hey, this is cool. I loved the Minimal Js Setup. Is it possible to show a deployed version of the same? Thanks

RobbiNespu commented 3 years ago

If anyone interested, take look on https://github.com/RobbiNespu/archie/pull/4/files it worked well when you are using light mode manual or light mode manual My code are messy, someone good with js and css maybe can do better

Hey, this is cool. I loved the Minimal Js Setup. Is it possible to show a deployed version of the same? Thanks

I dont have live deploy version but a gif should be ok?

I keep upstream (master) on my fork and do changes on other branch on my repo. So that why the screenshot look different, but the base and the file that should be patch are same

athul commented 3 years ago

Looks Clean. Could you send a PR with the current changes. I will review it and merge it 😄.

The Feather icon dependancy could be updated since people might not use the feather icons in their site, so making feather an optional dependency would be great.

RobbiNespu commented 3 years ago

Should we let it until upcoming hacktoberfest? But if you want, I can send PR with base from upstream (your master) when I free later.

For Feather icon, yeah.. I also posted my idea here https://github.com/athul/archie/discussions/26

athul commented 3 years ago

Why Hacktoberfest? Is there anything specific for waiting till Hacktoberfest?

RobbiNespu commented 3 years ago

Why Hacktoberfest? Is there anything specific for waiting till Hacktoberfest?

You put a label for hacktoberfest there :)

athul commented 3 years ago

Why Hacktoberfest? Is there anything specific for waiting till Hacktoberfest?

You put a label for hacktoberfest there :)

Forgot about it. Never mind about that. If you're free send the PR😄

RobbiNespu commented 3 years ago

@athul , I sending my patch for this issue on #30 PR

g-pacheco commented 3 years ago

Hello all,

I saw that @RobbiNespu did manage to fix this on his webpage, so it is not clear to me why this has not been implemented yet. I tried to follow the changes he suggested, and I do get a button that works, but the icon does not change to Moon when using the dark mode.

May I ask what is the current status of this issue?

Thanks in advance, George.

RobbiNespu commented 3 years ago

Hello all,

I saw that @RobbiNespu did manage to fix this on his webpage, so it is not clear to me why this has not been implemented yet. I tried to follow the changes he suggested, and I do get a button that works, but the icon does not change to Moon when using the dark mode.

May I ask what is the current status of this issue?

Thanks in advance, George.

Try check discussion on #30

As for now, my implementation won't work when page initially load as dark mode (either config as permanent dark or auto), because my understanding "dark mode" is for turning light-to-dark, not dark-to-light-to-dark

(but actually, it can be done by flip and switch the *.css + load js. That is the idea. I don't do that because it will be ugly implementation IMHO).

My fork (branch robbinespu.gitlab.io) contains lots of modifications but it solely for my own setup. So it won't working well if you take it. But you can take a look my implementation and adjust with your setup. The current dark-mode on my website use font-awesome icon. The upstream (this repo by athul) using feather-icons, i have discuss with him to moving forward and use lucide-icon too. I already done it on my website. If anyone interested, take a look on it and submit patch to upstream, else need wait for me to submit it when I am free. This should be great PR for starters by forking upstream, study my changes, implement it back on a branch and submit for PR.

(sorry, i added more discussion rather than focus on the topic. I just want to hint anyone to involve with this project too 😄)

About the icon, it not changing because it always load and use same icon for light or dark mode. You can change it on the js file.

g-pacheco commented 3 years ago

Hello @RobbiNespu,

Thanks very much for your comprehensive answer, and apologies for my late reply.

Yes, I had seen #30. To make it short, I really cannot see what is the "issue" with your solution. In my view, it does achieve the requested aim. However, I am sure that other can see things that I cannot.

Anyhow, I hope this will be implemented soon :) But I will try to follow what you suggested once again.

Thanks a lot, George.

athul commented 2 years ago

Closing due to #36