prefers-color-scheme, and a dark mode that is four lines

Dark mode is usually presented as a design project, and the version that respects the operating system setting and nothing else is a media query over custom properties.

:root {
    --bg: #ffffff;
    --fg: #1a202c;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #1a202c;
        --fg: #e2e8f0;
    }
}

body { background: var(--bg); color: var(--fg); }

This only works if the colours were already custom properties, which is the actual argument for adopting them — the dark theme is then a redefinition rather than a second stylesheet. Images and borders are what break: a logo with a white background and a shadow tuned for light backgrounds both need attention. Adding a manual override on top means storing a preference and setting an attribute on the root, which is another dozen lines and worth having.