search

matuzo / HTMHell

A collection of bad practices in HTML found on real websites.
MIT License
568 stars 67 forks source link

Improve dark mode support #57

Open matuzo opened 4 years ago

matuzo commented 4 years ago
carolgilabert commented 4 years ago

Hey there! I’d love to have a go at this 😊 I’m pretty new to open source contribution, but I’d like to help 🙌

matuzo commented 4 years ago

Awesome, thank you! :)

I was thinking about a toggle at the top left corner in the header with three options:

  1. System (default): reacts to @media (prefers-color-scheme: dark)
  2. Dark: current dark theme
  3. Light: current standard theme

There's a dark mode implementation already but I guess we should use custom properties to make it easier and more flexible. Browsers that don't support custom properties just fallback to the default theme.

Here's what you need to do to get started.

  1. Fork this repo.
  2. Install dependencies npm install
  3. Run the project npm run start
  4. Access the site at localhost:8080

Tell me, if I can assist you somehow. :)

carolgilabert commented 4 years ago

Cool, I'll pull the repo and have a look, I'll shout up when I've got something cooking 😄

carolgilabert commented 4 years ago

What timescales did you have in mind for this? I can probably get this sorted by the end of the weekend. Does that work for you?

matuzo commented 4 years ago

By the end of the weekend, the month, or the year. It doesn't really matter, just enjoy yourself and build something awesome. :)

ActiveB1t commented 4 years ago

If I can chime in with my 2 cents: if it is a toggle people will expect an on / off (or light / dark) functionality. A third "system" option might be unnecessarily confusing or difficult. If going for a 2-way toggle you could (and should) set this to the system preference on load if no site specific preference has been chosen.

matuzo commented 4 years ago

If I can chime in with my 2 cents: if it is a toggle people will expect an on / off (or light / dark) functionality. A third "system" option might be unnecessarily confusing or difficult. If going for a 2-way toggle you could (and should) set this to the system preference on load if no site specific preference has been chosen.

I thought that it might be a good idea to add a third option after reading this https://kilianvalkhof.com/2020/design/your-dark-mode-toggle-is-broken/. So, it's just about giving users the option to reset their setting once they've clicked "light or dark". After thinking a little longer about it, I'm not sure any more if it's really necessary. What do you think @carolgilabert?

carolgilabert commented 4 years ago

I'm inclined to agree with you, and the article. If the light/dark choice is persisted, then I think we want to give people a choice to go back.

blue2blond commented 4 years ago

As I was brave enough to submit a reply on HTMHell nr 20 (https://twitter.com/blue2blond/status/1265754248798785536), why not sharing some more (with the risk of taking the fun out of this issue).

This boilerplate might come in handy: https://erwinhofman.nl/projects/darkmode/

Obviously, layout is completely up to you. It can be simple checkboxes such as at my own site (www.erwinhofman.nl) or a fancy styled toggler such as at www.cuebic.nl. Both are using the same HTML inputs and same JS, just different CSS.

A toggler construction with three states could be constructed yourself.

One caveat: without JS, no darkmode support in this setup. I didn't solve this yet, as you would run into CSS inheritance issues and one have to create double CSS declarations (once using classes when JS is supported, and once when no classes are attached to the body and CSS media queries should be used).

Code snippets could undoubtedly be shortened / improved. I just subtracted it from our codebase and rewrote it to vanilla JS and into a simple demo-page as I ran into this issue.

Good luck! I am curious of the end result!

matuzo commented 4 years ago

How’s going @carolgilabert? Any progress? Can I help? 🙂

carolgilabert commented 4 years ago

Hey! I'm really sorry for the radio silence, it's been a tough couple of weeks 😔

I started it a little bit ago, putting all the colours into custom properties. What I'll do is put my fork on netlify so I can show you progress as I go. I was going to use this for reference: https://hankchizljaw.com/wrote/create-a-user-controlled-dark-or-light-mode/

But I'll also bear in mind the boilerplate above 🙂

matuzo commented 4 years ago

No worries, looking forward to your first draft. :)

carolgilabert commented 4 years ago

Heya! I managed to get some time in on this 🎉

Branch: https://github.com/carolgilabert/HTMHell/tree/task/dark-mode-toggle Preview: https://5f06072225fbeb9d1fc16941--heuristic-spence-782479.netlify.app/

It'd be useful to decide:

I have a bunch of next steps to do in the meantime, but keen to hear your thoughts on those and any early feedback you may have 🙂

matuzo commented 4 years ago

Hey!

Thanks! It works great and the top left position is also fine but it kinda looks like another logo. It'd be great if we could make it look like on Cassies website for example. A spinning pentagram on click would be beautiful. 😁

Just tell me if you need help with that. :)

safeamiiir commented 1 year ago

Hey all, I was trying to see why we don't have a dark theme on the website, and I ended up here! I think it's mostly done by @carolgilabert. So I can help! I found this website really useful by the way so why not have a dark theme to make it easier to read for some people - like me - :D

matuzo commented 1 year ago

Hey all, I was trying to see why we don't have a dark theme on the website, and I ended up here! I think it's mostly done by @carolgilabert. So I can help! I found this website really useful by the way so why not have a dark theme to make it easier to read for some people - like me - :D

That would be great! As far as I know, I'm not using custom properties, you can replace static color definitions with custom props, if you want to.

Feel free to send me a PR.

CBID2 commented 10 months ago

Hi @matuzo! :) Is this issue still being worked on?