Astro, WCAG Accessibility, Theme Switcher, IntersectionObserver API

I noticed that I always work with HTML elements that I know, such as <nav>, <ul>, <button> etc., but this time I wanted to explore and introduce a couple of new ones (for me at least). I found that, for example, the <picture> element is quite useful for specifying which source of an image to use at what viewport width, without the need of any CSS or media queries. I'm curious if you guys know any other handy HTML elements to use :)

As an experiment I build a color theme switcher. I would love to know if anyone has experience with building it any other way? I saw for example that you can also work with a <form>, radio buttons and the :has() selector, but Firefox doesn't support this selector yet.