css • Theming light dark - martindubenet/wed-dev-design GitHub Wiki

Requirements:

<meta name="color-scheme" content="light dark" /> : Declare this meta within the <head>, before any stylesheets is gets loaded in the DOM.
:root { color-scheme: light dark; } : Add this line with your before your set of CSS variables.
color: light-dark(#333, #efe); : Declare the differences.

Meta name="color-scheme"

Multiple color schemes indicates that the first scheme is preferred by the document, but that the second scheme is acceptable if the user prefers it.

<html lang="…">
   <head>
      …
      <meta name="color-scheme" content="light dark" />
      <link rel="stylesheet" href="*.css" />

:root {
  color-scheme: light dark;
  …
}

body {
  color: light-dark(#333b3c, #efefec);
  background-color: light-dark(#efedea, #223a2c);
}