Dark mode and a new CSS linter which has changed the style.css file

src/project/static/css/style.css

@@ -1,24 +1,46 @@
 /* Reset */
-*, *::before, *::after {
+*,
+*::before,
+*::after {
   box-sizing: border-box;
 }
+
 * {
   margin: 0;
 }
+
 body {
   line-height: 1.5;
 }
-img, picture, video, canvas, svg {
+
+img,
+picture,
+video,
+canvas,
+svg {
   display: block;
   max-width: 100%;
 }
-input, button, textarea, select {
+
+input,
+button,
+textarea,
+select {
   font: inherit;
 }
-p, h1, h2, h3, h4, h5, h6 {
+
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
   overflow-wrap: break-word;
 }
-#root, #__next {
+
+#root,
+#__next {
   isolation: isolate;
 }
 
@@ -32,7 +54,9 @@ p, h1, h2, h3, h4, h5, h6 {
   --dark-dust: #bfbfbf;
   --fade: #878787;
   --twilight: #4a4a4a;
+  --dark-twilight: #2f2f2f;
   --dark: #2a2a2a;
+  --dark-dark: #121212;
   --light-custard: #eee7d5;
   --custard: #f0dcac;
   --dark-custard: #d4c7a9;
@@ -53,12 +77,18 @@ p, h1, h2, h3, h4, h5, h6 {
   }
 }
 
-html, body {
+html,
+body {
   height: 100%;
   font-size: 1.05em;
 }
 
-h1, h2, h3, h4, h5, h6 {
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
   font-weight: 600;
   color: var(--twilight);
 }
@@ -105,6 +135,7 @@ header > a.logout {
   background: var(--twilight);
   text-decoration: none;
   color: var(--dust);
+  transition: background 0.2s;
 }
 
 header>a.logout:hover {
@@ -254,6 +285,8 @@ button {
   border: 0;
   font-weight: 600;
   text-decoration: none;
+
+  transition: opacity 0.15s;
 }
 
 button.small {
@@ -348,8 +381,7 @@ form fieldset {
   margin: 0;
 }
 
-form div.buttonHolder {
-}
+form div.buttonHolder {}
 
 form div.buttonHolder button {
   display: inline-block;
@@ -486,3 +518,61 @@ span.time_remaining {
 .pagination .page-item.disabled .page-link {
   cursor: default;
 }
+
+@media (prefers-color-scheme: dark) {
+  body {
+    background: var(--dark-dark);
+    color: var(--medium-dust)
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  footer,
+  nav ol li a {
+    color: var(--medium-dust);
+  }
+
+  nav ol li a.current {}
+
+  nav ol li a:not(.current):hover {
+    border-color: var(--medium-dust);
+  }
+
+  header,
+  main aside,
+  nav {
+    background: #1d1d1d;
+  }
+
+  nav {
+    border: none;
+  }
+
+  hr {
+    border-color: var(--twilight);
+  }
+
+  main aside div,
+  article div.content-view {
+    background: var(--dark-twilight);
+  }
+
+  article table tbody {
+    background: var(--dark-twilight);
+  }
+
+  article table tbody tr:nth-child(2n+1) {
+    background: var(--dark);
+  }
+
+  article table tbody tr:nth-child(2n+1) td {
+    border-top: 1px solid var(--dark-dark);
+    border-bottom: 1px solid var(--dark-dark);
+  }
+
+
+}