Initial

styles/darkmode.scss

@@ -0,0 +1,45 @@
+@import "../node_modules/bootstrap/scss/functions";
+@import "../node_modules/bootstrap/scss/variables";
+@import "../node_modules/bootstrap/scss/mixins";
+@import "./_variables.scss";
+@import url("https://use.typekit.net/pqm5uiz.css");
+
+@media (prefers-color-scheme: dark) {
+  body {
+    background-color: $hp-nearly_black;
+    color: $hp-nearly_white;
+  }
+  .modal-body {
+    background-color: $hp-nearly_black;
+    color: $hp-nearly_white;
+  }
+  .modal-header,
+  .modal-footer {
+    background-color: $hp-dark_grey;
+    color: $hp-nearly_white;
+  }
+  tbody td,
+  tbody th {
+    color: $hp-nearly_white;
+  }
+  a {
+    color: $hp-dark_white;
+  }
+
+  .form-floating input,
+  .form-floating select,
+  .form-floating textarea {
+    background-color: $hp-light_grey;
+    color: $hp-nearly_white;
+    border-color: $hp-dark_grey;
+
+    option {
+      color: $hp-nearly_white;
+    }
+
+    &:focus {
+      background-color: $hp-light_grey;
+      color: $hp-nearly_white;
+    }
+  }
+}