Very pleased and a little nervous to announce that I got to write a bumper post for CSS-tricks!

Sara Joy :happy_pepper:

Come To The Light-dark() Side | CSS-Tricks

Dark mode interfaces have matured a lot in the past few years. We all know the "traditional" approach using media queries but in this article, Sara Joy demonstrates modern CSS features that make respecting user color scheme preferences pretty darn easy.

CSS-Tricks (css-tricks.com)

#CSS #darkMode #lightMode #contrast #accessibility

Stefan Bohacek

@sarajw Very cool!!

Curtis Wilcox

@sarajw
Nice!

Yesterday-I-Learned from @mahryekuh that you can put event listeners on fieldsets. So instead of putting `onchange` on each radio button, you can just put one on the fieldset:
`<fieldset onchange="switchMode(event.target.value)">`

@csstricks

Sara Joy :happy_pepper:

@cwilcox808 @mahryekuh @csstricks Ooooo yes that's definitely a good way to dry it out a bit! Nice!

Marijke Luttekes

@cwilcox808 @sarajw @csstricks Thank you for the mention!

Timothée Goguely

@sarajw @cwilcox808 @mahryekuh @csstricks I just prototyped a tiny demo with some JS refactoring, and it works like a charm!

Just a moment...

(codepen.io)

Sara Joy :happy_pepper:

@timotheegoguely @cwilcox808 @mahryekuh @csstricks perfect!!

Marijke Luttekes

@sarajw @timotheegoguely @cwilcox808 @csstricks That is pretty neat! One note about these theme switchers I recently learned:

In production websites, you want to hold off on the theme switch until the user presses a button to confirm. I learned this from an accessibility specialist.

I mentioned this in an article when I switched my blog's settings panel to a dialog that has a submit button:

Blog improvements: headings and settings / Marijke Luttekes

An overview and reasoning behind recent (accessibility) improvements to my website.

(marijkeluttekes.dev)

Sara Joy :happy_pepper:

@mahryekuh @timotheegoguely @cwilcox808 @csstricks thank you! I'd love to have further information on that, if you can share any?

Steve Barnes

@mahryekuh –

Hooray for "system" as a colour theme. (If anything, I'd assume most people wanted their system setting applied to the whole Web and hesitate to add other explicit themes. I don't know – are you aware of many who prefer the explicit choice?)

Curtis Wilcox

@sarajw
My guess it's a thing I referenced in my comment on the article: traditionally changing inputs doesn't immediately make anything happen. Because these particular inputs don't trigger a change in context, I don't think any WCAG criteria are failed but it's about meeting expectations.

However, even changes of context on input are allowed by WCAG if the user is informed. These inputs change visual settings, they have labels that say what they're for, and there's no button accompanying them, will immediately making the change really be unexpected?

@mahryekuh @timotheegoguely @csstricks

Sara Joy :happy_pepper:

@cwilcox808 @mahryekuh @timotheegoguely @csstricks thank you! I guess that's one argument for using buttons rather than select or radio button inputs.

Marijke Luttekes

@sarajw @cwilcox808 @timotheegoguely @csstricks Yes, it was indeed because the old design wasn’t explicit about persisting settings when a user changed an input.

There is nothing wrong with select, radio, or checkbox inputs as long as they don’t automagically toggle something without the user knowing.

Marijke Luttekes

@Starfia I am not invested in other people’s default color scheme choices. I dabble between system and dark most of the times, and know only two people IRL who use light mode on purpose.

I have my blog set to dark because I don’t like the lighter theme much, which is ironic as I designed it myself.