search

ubccsss / ubccsss.org

Website for the UBC CSSS
https://ubccsss.org/
MIT License
16 stars 47 forks source link

Add Dark Mode To Site #507

Closed justindhillon closed 11 months ago

justindhillon commented 1 year ago

I just added dark mode to the site. I put an icon in the header bar that toggles it on and off. I then created a cookie that saves your dark mode preference. I used the dark reader api to make this happen. I edited the header.html partial template and the global css file. The icons are unicode emojis. Here is a youtube video demonstrating my contributions:

https://youtu.be/yIsChD3tGxs

kewbish commented 1 year ago

Hello and thank you for your PR! Just a heads up that I plan to review this sometime next weekend, sorry for the wait!

kewbish commented 11 months ago

Did you get a chance to fix the toggle on mobile as we discussed?

justindhillon commented 11 months ago

I got a little busy with other things, but it will be implemented soon.

justindhillon commented 11 months ago

@kewbish Dark mode is now ready for production. It now looks like a nice button, uses a local image to increase device compatibility, and behaves well on mobile.

kewbish commented 11 months ago

Thanks for the update. Where are the icon images taken from? Could you please check their licensing requirements?

Also, I made some updates to the button styling to more closely align with the rest of the site branding. LMK if this looks alright to you or if there were any specific points you wanted to keep from your previous iteration.

justindhillon commented 11 months ago

I replaced the icons with ones I made myself. I credit myself in the css file. This resolves #500. Button looks good to me!