使用两个 CSS 文件的暗/亮模式

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

The most simple solution I can think of is to just include both files and use media queries:

@media (prefers-color-scheme: light) {
    /* CSS here */
}

@media (prefers-color-scheme: dark) {
    /* CSS here */
}

The browser will then use the user's system colour scheme to determine which set of CSS to use.

(For the sake of legacy browsers, it's probably best to only have one of the files have the media query and include that file second)

Answer 2

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">