I recently added dark-mode support to a few sites. It took way more time then I thought it would. At first I thought "oh just add a few lines off CSS" but then ...

* Some diagrams had white backgrounds

Solution: remove the backgrounds so they are transparent

* Most diagrams had black lines/arrows which didn't look good on dark gray backgrounds

Solution: use CSS filter:invert for images

* Some images are photos not diagrams so inverting their colors doesn't work

Solution: Use a selector for svg only img[src$=.svg] and a class when manually needed

* Some svg diagrams have their colors referred to like "see the red object" in that text.

Solution: filter: invert(1) hue-rotate(180deg);

That makes the blacks become white but the colors kind of stay the same hues at least

* The are many interactive digrams on the sites.

Solution: All of those had to be refactored to not use hard coded colors but do something like

    const darkMatcher = window.matchMedia("(prefers-color-scheme: dark)");
    const isDarkMode = darkMatcher.matches;
    const colors = isDarkMode ? darkColors : lightColors;

And draw everything with the appropriate colors. Its up to you if you want to trigger re-drawing if the user changes their preference

* Some text was color coded for to match the diagrams as in

    <span style="color: red;">x-axis"</span>

But now those colors looked bad on a dark background.

Even 5 months later I still find places I missed.