All solutions

As always, please tell me what improvements you would make to the existing code. I guess as far as semantic HTML goes, with angular I'm not as pleased with the final result. For example when I wrote this using vanilla JS, both the editor and parsed markdown were sections, but in angular it felt off to either wrap the component in a section or use one inside the component (since that would get wrapped by the component itself). I don't know maybe I'm just missing something obvious here and overcomplicating things.

I probably spent more time than I should tinkering with this one. These helped me get things done the way I wanted:

• https://www.bram.us/2020/04/26/the-quest-for-the-perfect-dark-mode-using-vanilla-javascript/
• https://codepen.io/alvarotrigo/pen/WNXLZNN

I made changes to the original code but most of the heavy lifting was already done. What I'd like you to tell me is:

• How you would improve on the JS (splitting the code into smaller functions?)
• How the CSS could be improved in your opinion. I reached for multiple things at once and I guess the readability might have suffered for it.

• How would you improve on the JS used for this?
• What issues do you see with my implementation of BEM?
• Is there any redundant styling that could be moved up to a parent?
• How would you make the HTML more semantic? I thought about using heading elements for some of the text but they seemed unnecessary.