One button, like mine, does mean that users can't explicitly choose that they want my site to follow their browser or OS setting. ![]() The great thing about a button element, just for the record, is that it comes with keyboard support built-in. In Underengineered Toggles Too, Adrian Roselli explains that the button makes sense if the control only works with JavaScript (check we need to toggle a class or attribute to apply the CSS), if it only has true or false states, not mixed (check we allow either light or dark) and if flipping the control immediately performs an action (check the color scheme changes straightaway). To switch styles, I would need JavaScript either way, so I would not benefit from having a checkbox in this case. I ended up going for just the one button element. I guess the lesson is: never style elements too far from their original purpose. With a keyboard, you would need arrow keys to pick the other option and that feels weird, especially for a control that is styled to not look like radio buttons. It must have been late, because only when I started testing this with keyboard, a sanity check I do with all controls, I realised it didn't feel right. In other words, when dark mode was on, the light mode option was visible and vice versa. I went ahead to visually hide the control itself and then use the :checked pseudo class to only display the option that wasn't picked. I started out with radio buttons as I thought that was clever, and even ended up building the control all the way from coding a form a fieldset, legend and options. A checbox could be an option too… if there is only one option, checkboxes too allow just the one option. There are a lot of HTML elements that you can use to give users a choice between one out of many options. His post has more reasons: however you support light and dark modes, you will likely end up with code duplication somewhere, and toggles that live in developer land require JavaScript. This is fun to fiddle around with, but really, it seems to me that all websites have this requirement, so why isn't this built into browsers? In other words, I agree with Bramus Van Damme, dark mode toggles should be a browser feature. Basically, it's a long winded way of saying why it took me so long. ![]() ![]() In this post I will talk about some of the choices I made along the way. Yesterday, I implemented a dark mode toggle, so that you can override that at your leisure. If your system preference was “dark”, that's what you would get (unless you used fancy browser flags). This site has had dark and light modes for a while, but it never offered any choice.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |