.tip

A white scrollbar down the side of a dark page, a light date picker and a dark caret in a dark input all come from the same thing: your CSS went dark and the browser still thinks the page is light. color-scheme is what tells it.

:root {
  color-scheme: light dark;
}
 
[data-theme="dark"] {
  color-scheme: dark;
}

Two values let the system preference choose between them, one value forces it, which is what a theme the reader picked needs. Set it on :root so scrollbars, form controls and the default canvas inherit it everywhere.