A pure CSS solution would probably use the --scheme-type CSS variable, or even the color-scheme property that was added a few hours ago (woo!), with @container style queries or light-dark().
Unfortunately light-dark() only works with color values. You might be able to use @container style queries targeting the color-scheme property (firefox doesn’t support style queries for custom properties yet). Haven’t been able to test the idea as my dev env is currently down.
Having a dedicated .dark-mode or .light-mode class on the root would definitely be the easiest to work with.