But is imperfect, it's so much easier if you avoid JS altogether.
I have added an element below to demonstrate the problems you will encounter if you try to bypass the OS setting. Well, you will have to write a ton more CSS to tackle several elements on the screen.
Notice the color of the scrollbar below when you toggle dark mode using the button. The scrollbar styles don't change, you will have to write additional CSS to tackle that. Same goes for the toggle button.
Well, you can try to find the lesser known CSS properties to solve that.
And the scrollbar-color
CSS property exists,
but it's experimental and isn't supported across all
browsers.
So you will either be unsuccessful or will have to find all the vendor
prefixes to style the scrollbar for all modern browsers.
So I hope you're convinced that, it's much easier to use the
color-scheme
meta tag to let the browser's default stylesheet prevent you from
working so hard.