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

Curtis Wilcox

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:

https://marijkeluttekes.dev/blog/articles/2024/09/12/blog-improvements-headings-and-settings/

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.