I guess it's better than nothing, but this does not feel like a very CSS way of solving this problem. I think I'd rather write a separate block of styles for dark mode, the way you do for other media queries. Happy to hear why that's wrong though.
It's "only" colors ? So far from 100% of your css (especially if you use something like tailwind where css class for shape and color are clearly separated)
Also I m not a css expert but can't you also simplify it by using css variables so that you can further reduce the scope of change by having only the css variables that change value ? Your --primary-color-500 etc.
