TL;DR: If you're using both prefers-color-scheme and a manual .dark class to toggle themes, don't forget to also control the color-scheme CSS property. Otherwise, native browser UI (scrollbars, selects, etc.) will stay light while your page is dark. And that looks broken. Read Original Vesion in Chinese You probably know that prefers-color-scheme lets you detect a user's OS-level light/dark preference. @media ( prefers-color-scheme : dark ) { :root { /* dark variables */ } } Enter fullscreen mode Exit fullscreen mode It's clean, it's native, and it even styles native form controls automatically — thanks to color-scheme . :root { color-scheme : light dark ; } Enter fullscreen mode Exit fullscreen mode This tells the browser: "respect the user's preference, please." But what if you need a manual toggle? Many sites add a theme switcher button that overrides the OS setting. The common pattern? Add/remove a .dark class to the <html> element. function toggleTheme () { const root = document .…
