Hey there, this is looking very good, it's nice and responsive at most screen sizes. It overflows a bit on very small widths, which could be fixed, but that's a very minor point.
Well done for thinking of the accessibility of the theme toggle. People using screen readers are not always blind or visually impaired, so it is still useful for this theme toggle. Because you've made it using an <input> field it already has the html in place to be accessible, you don't actually need a separate button. What you do need though is a focus style on the switch so that you can see when you are interacting with it with a keyboard.
For the rest of the HTML there are a couple of issues. Mainly around the use of headings. Having an <h2> with a value of 1987 wouldn't make sense for someone navigating by heading. We need something more appropriate. In this case maybe you could have a hidden heading of Facebook, Twitter etc for each of the cards. It is a tricky one though. These kind of data-heavy apps can be difficult to decide on good semantics for.
Your question about wrapping the things with an <a> tag is a good one. It's technically valid, but won't be read very well with a screen-reader. There's an excellent article by Heydon Pickering that goes into great detail about creating an accessible card, including how to make it a clickable link. Well worth reading https://inclusive-components.design/cards/
Marked as helpful
