Use CSS variables and toggle them with JS, it would be the easiest option. Not all browsers support CSS variables.
Just make a class (or attribute) to apply on body and override styles in any element within that body you want to change. In JS you just toggle that one class/attribute on body.
body[theme="dark"] {
background: #000;
color: #fff;
}
body[theme="dark"] nav {
...
}
body[theme="dark"] footer {
...
}
From the architecture point of view I would recommend creating a separate themes CSS/SASS/whatever folder and put there everything in the original structure, something like:
core.css
variables.css
components/nav.css
components/footer.css
themes/dark/core.css (override and change variable names where needed)
themes/dark/variables.css
themes/dark/components/nav.css (only override main nav.css)
themes/dark/components/footer.css (only override)
and at the end you might have main.css and main-dark.css
P.S. you may also use currentColor to save you some CSS. Basically you should change main styles on html/body and that should be enough for most simple cases if you just want to invert colors.