Dark/Light mode using two CSS files

Question

I am using a web software, that allows to create themes. It creates a single CSS file per theme, so i've got two CSS files: dark.css and light.css.

What's the best way to create a dark/light mode switch (independent from the visitor's system settings) using both CSS files? I've tried loading the opposite theme upon click, but that's very impractical and requires at least one more roundtrip.

I can embed the CSS files contents into the DOM, if that helps to achieve a smooth switch.

Answer 1

If you'd like to keep CSS files separate you can use:

<link rel="stylesheet"
    href="css/light.css">
<link rel="stylesheet" media="(prefers-color-scheme: dark)"
    href="css/dark.css">