search

infi-nl / the-infi-way

How we like to build software
https://way.infi.nl
Other
9 stars 8 forks source link

Add lightmode based on system preference #64

Closed david-infi closed 1 year ago

david-infi commented 1 year ago

This edit adds a light mode design to the Infi Way. It is used based on the system settings of the user. Most people probably have light mode on by default, but maybe we want to default to dark mode unless specifically set. This is currently not supported so might need to change the code to support this behaviour.

netlify[bot] commented 1 year ago

Deploy Preview for the-infi-way ready!

Name Link
Latest commit b28159aff5546c7c109991bdf90afe1dbf46e6f1
Latest deploy log https://app.netlify.com/sites/the-infi-way/deploys/6482f6948a56ec00089f594e
Deploy Preview https://deploy-preview-64--the-infi-way.netlify.app
Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

david-infi commented 1 year ago

I want to edit the background SVG so that it can be used for both the dark mode and the light mode version (with some dynamic CSS). Right now there are two SVGs; one for the dark mode and one for the light mode.

david-infi commented 1 year ago

I was unable to find a clean way to change the fill / opacity of the background SVG 😢 I am leaving it as is, with two different SVGs.

LucaScorpion commented 1 year ago

Very nice work! And I have to say, despite generally not being much of a light-mode person myself, I think it looks quite good. So no comments there from me! :raised_hands:

I was unable to find a clean way to change the fill / opacity of the background SVG cry I am leaving it as is, with two different SVGs.

Yeahhh, I remember also looking into that a bit, but I also couldn't find a clean way of doing it. But 2 SVGs is fine I think, especially since I don't expect them to change anytime soon.

I do agree with Jeroen that just going by system prefs and not having a toggle on the site feels... less than ideal. I think a toggle for that could be done fairly easily with a simple toggle/slider and a couple of lines of JS in the script tag. I'm personally quite fond of the way https://react.dev/ does it, by defaulting to your system pref and just having a button to toggle the theme. This is a bit simpler than a menu like on https://tailwindcss.com/. Imo the "system" option is kinda nice, but generally unnecessary.

Side note: I'm also a fan of these kinds of toggles, cause they look real fancy :star_struck: Especially if they're animated.

image

On the other hand, we could also defer implementing something like that to a separate issue/PR? I don't have a super strong opinion about that, and arguably this is already nicer than everyone being stuck on dark mode.

jeroenheijmans commented 1 year ago

I also prefer the toggle style buttons. A little bit of JS and localStorage seems a pragmatic approach. Personally though I would default to dark and not the user settings, just because I think dark mode is so much nice to look at 😅

PS. Those buttons you copied here @LucaScorpion do we have appropriate (copy)rights to include them with current license, and choose a different license for them later on? Otherwise I could hop into Figma and try to create something too.

LucaScorpion commented 1 year ago

@jeroenheijmans

do we have appropriate (copy)rights to include them with current license

Ha no, they're just a quick example I duckduckgo'd :sweat_smile: More to illustrate the idea of the slider with sun/moon icon in it :)

Otherwise I could hop into Figma and try to create something too.

That would be great!

david-infi commented 1 year ago

I have been working on this. Attached is a video of a toggle I have been working on. It's still a work in progress, because I would like to improve the stars and clouds.

https://github.com/infi-nl/the-infi-way/assets/129850533/0dfac0a4-5910-42cf-97b9-eda19b937760

jeroenheijmans commented 1 year ago

@david-infi Nice! Thanks for picking that up I slacked a little.

Is it SVG by any chance? We've not been super clear about it but we try to keep the Infi Way documents super self-contained, perhaps even go back to single-html-file setup some day ... so a visual that can be easily inlined would be nice.

LucaScorpion commented 1 year ago

Closing this, as it has been completed in https://github.com/infi-nl/the-infi-way/pull/81