css: Add dark theme

- add CSS override for dark theme
- add javascript to toggle that
- TODO: add user configuration with peristence (probably using local
  storage or cookies to make this device specific)

Fixes WeblateOrg#2969

weblate/static/loader-bootstrap.js

@@ -1155,6 +1155,19 @@ $(function () {
     }
   });
 
+  /* Dark theme handling */
+  const prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)");
+  const darkStyleElement = document.getElementById("style-dark");
+  function toggleDarkScheme() {
+    if (prefersDarkScheme.matches) {
+      darkStyleElement.setAttribute("media", "screen");
+    } else {
+      darkStyleElement.setAttribute("media", "not all");
+    }
+  }
+  prefersDarkScheme.addEventListener("change", toggleDarkScheme);
+  toggleDarkScheme();
+
   /* Warn users that they do not want to use developer console in most cases */
   console.log(
     "%c%s",

weblate/static/style-bootstrap.css

@@ -4,6 +4,10 @@
  * SPDX-License-Identifier: GPL-3.0-or-later
  */
 
+:root {
+  color-scheme: only light;
+}
+
 .avatar {
   -webkit-border-radius: 50%;
   -moz-border-radius: 50%;