Improve dark mode support

[matuzo]

• Add toggle to header (Options: Dark, Light, System).
  Light, Dark will always be light or dark.
  System reacts to @media (prefers-color-scheme: dark)
  A spinning pentagram in the toggle when changing option would be nice.
• Fallback for browsers without custom property support
  Test in IE11
• Tweak existing dark mode design if necessary.
  It's ok, but maybe you'll find something to improve it.
• Test focus styles in dark mode.
• Ensure accessibility.

[carolgilabert]

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]

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]

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

[carolgilabert]

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]

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

[ActiveB1t]

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]

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]

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]

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/

• vanilla JS
• auto detecting user preferences
• adjusting on site, saved between page navigations (using sessionStorage)
• revocable on-site
• constructed with simple checkboxes

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]

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

[carolgilabert]

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]

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

[carolgilabert]

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:

• Where the toggle will live (I thought of putting it by the twitter link, but it doesn't make sense to put it in the nav)
• What the 3 option toggle will look like 🤔

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]

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]

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]

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]

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