How to correctly organize the switching of styles of a light/dark site?

Question

css

I’m sure there are many solutions, I see only two, help me decide, I don’t understand which solution is better to apply:
1) Create a common style file, switch between themes by hanging a class, for example, on body, and override css in a cascade.
Of the pros:
The site page will not be reloaded.
Of the minuses:
Cascades.
General css file, the site is not small in size..
2) Move the styles to different files and connect them separately, when you click on the switch, the site page will be updated and the css file with a different theme will be connected.
From pluses:
Extra styles are not connected.
There are no cascades.
Of the minuses:
Duplication of classes and a lot of ..
I'm going to store the style choice in the user's session and in cookies.

Answer 1

Of the minuses:
Duplication of classes and a lot of ..
Use preprocessors. Move all colors to variables. There will be no duplication.
Why refresh the page? The style file can be loaded and removed dynamically via js.
https://stackoverflow.com/questions/574944/how-to-...

Answer 2

My version:

<link rel="stylesheet" href="css/light.css" id="css">
<script language="javascript">
    $.ready(function() {
        if(is_dark()) {
            $("#css").attr("href", "css/dark.css");
        }
    });
</script>