🌙 My dark mode toggle works but some sections look terrible

I added a dark mode toggle to my portfolio site last week. The toggle itself took 10 minutes. Everything after that has taken 6 days. Some sections look great and others look broken. My contact form has white input boxes floating on a black page, like little windows. The footer text turned grey on grey, and I couldn't read my own phone number. I'd written the colours straight into the CSS as I went along. A hex code here, another there. Last night I searched for white and found 47 matches. I had no idea which ones mattered. I fixed 20 of them, then noticed the buttons looked wrong, and the cards, and a shadow. At 1 am I closed the laptop and had chai. It didn't help, but it felt right. My brother in Dubai looked at it on his phone and said the images look odd too. My logo has a white background, so it shows up as a white box on the dark page. I didn't even think about images when I started. I only thought about text and backgrounds. Now I'm scared of what else I haven't noticed yet, like the 404 page. So I'm thinking of starting the whole thing over, properly. But I don't know how to plan it. Should I make a list of every colour first? Or is there a smarter way to organise them? I'd like to avoid doing this again on my next site. This one is a small 6 page website. Tell me what you'd do on day 1, before writing any of the dark styles.

Check how it looks on your phone in a dark room too. Mine looked fine on my laptop and awful there. Pure black backgrounds with pure white text hurt my eyes after 10 minutes. A dark grey is easier. For the logo, I just made a version with a transparent background. It took 5 minutes in any editor. Don't redo the whole site yet. Fix the list of colours first, then see what's left.

I made this exact mess on my first site. Mine had 60 colours and I couldn't remember half. What saved me was making a short list of named colours, like background, text, border and card. Then every element uses those names, and the dark theme only changes the list, nothing else. Check your images and logo separately, because those don't change with the list. That part catches everyone.