My latest thought is to keep all the CSS in the style tag but to add an extra class to the front of ALL the selectors. Then the JavaScript applies the appropriate class to the HTML tag so as to select which part of the really huge CSS should be applied to the page.
That would transfer the complexity to the CSS all of which would need to be written and allow a simple 2 or 3 line JavaScript.
At least this would be consistent with the way you’d change the styling for when JavaScript isn’t supported rather than doing something unique to the page.
Still a really bad idea for a web page though as you are still forcing people to download all the styles even if the switcher is not used and are even forcing the download of styles in other options not selected even when the switcher is used.
Using this approach the page would probably only take about 400% of the time it would take to load if it were done properly with separate files for the first page and 4000% for each subsequent page.