Use "smart invert" for dark mode (#2038)

* Use "smart invert" for dark mode

Signed-off-by: Elsie Hupp <9206310+elsiehupp@users.noreply.github.com>

* Add more contrast to form controls

Co-authored-by: Joshua Tauberer <jt@occams.info>

management/templates/index.html

@@ -62,9 +62,37 @@
 	    ol li {
 	       margin-bottom: 1em;
 	    }
-
+          
             .if-logged-in { display: none; }
             .if-logged-in-admin { display: none; }
+
+      /* The below only gets used if it is supported */
+      @media (prefers-color-scheme: dark) {
+        /* Invert invert lightness but not hue */
+        html {
+          filter: invert(100%) hue-rotate(180deg);
+        }
+
+        /* Set explicit background color (necessary for Firefox) */
+        html {
+          background-color: #111;
+        }
+          
+        /* Override Boostrap theme here to give more contrast. The black turns to white by the filter. */
+        .form-control {
+          color: black !important;
+        }          
+
+        /* Revert the invert for the navbar */
+        button, div.navbar {
+          filter: invert(100%) hue-rotate(180deg);
+        }
+          
+        /* Revert the revert for the dropdowns */
+        ul.dropdown-menu {
+          filter: invert(100%) hue-rotate(180deg);
+        }
+      }
         </style>
         <link rel="stylesheet" href="/admin/assets/bootstrap/css/bootstrap-theme.min.css">
     </head>