feat(theme): add a proper dark mode (and globally improve CSS styles)

This patch globally improves Apaxy CSS theme, and adds a dark mode (media query: `prefers-color-scheme`).
It also fixes some indentation issues the style-sheet was reading.

Co-authored-by: NAERNON <naernon@icloud.com>

apaxy/theme/style.css

@@ -19,14 +19,18 @@ button,hr,input{overflow:visible}audio,canvas,progress,video{display:inline-bloc
 
 html {
   min-height: 100%;
-  border-top: 10px solid #ECEEF1;
-  border-bottom: 10px solid #ECEEF1;
   color: #61666c;
+  background-color: #fff;
   font-weight: 400;
   font-size: 1em;
-  font-family: sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   line-height: 2em;
 }
+@media (prefers-color-scheme: dark) {
+  html {
+    background-color: #232323;
+  }
+}
 
 body {
   padding: 20px;
@@ -38,17 +42,31 @@ code {
 }
 
 a {
-  color: #61666c;
+  color: #000;
   text-decoration: none;
 }
+@media (prefers-color-scheme: dark) {
+  a {
+    color: #e9e9e9;
+  }
+}
 
 a, img {
   border: none;
   outline: none;
 }
 
+a > img:hover {
+  opacity: 0.4;
+}
+
 a:hover {
-  color: #2a2a2a;
+  color: #bababa;
+}
+@media (prefers-color-scheme: dark) {
+  a:hover {
+    color: #696969;
+  }
 }
 
 /*------------------------------------*\
@@ -65,18 +83,27 @@ a:hover {
     Filter (search box)
 \*------------------------------------*/
 #filter {
+  background-color: rgba(0, 0, 0, 0.04);
   float: right;
   font-size:.75em;
   padding: .5em;
   margin-bottom: .5em;
-        border: 1px solid #aaa;
+  border: 1px solid rgba(0, 0, 0, 0.15);
   border-radius: .25em;
   width: 10em;
   transition: width 0.25s ease;
 }
+@media (prefers-color-scheme: dark) {
+  #filter {
+    background-color: rgba(255, 255, 255, 0.07);
+    border-color: rgba(255, 255, 255, 0.15);
+    color: white;
+  }
+}
 #filter:focus {
   width: 14em;
 }
+
 /*------------------------------------*\
     Demo block
 \*------------------------------------*/
@@ -96,6 +123,21 @@ table {
   width: 100%;
   border-collapse: collapse;
   font-size: .875em;
+  color: rgb(143, 143, 143);
+}
+@media (prefers-color-scheme: dark) {
+  table {
+    color: rgb(111, 111, 111);
+  }
+}
+
+.odd {
+  background-color: rgb(244, 244, 244);
+}
+@media (prefers-color-scheme: dark) {
+  .odd {
+    background-color: rgb(50, 50, 50);
+  }
 }
 
 tr {
@@ -103,10 +145,6 @@ tr {
   border: 0;
 }
 
-tr:hover td {
-  background: #f6f6f6;
-}
-
 th {
   text-align: left;
   font-size: .75em;
@@ -137,7 +175,6 @@ td {
   padding: 5px 0;
   outline: 0;
   border: 0;
-  border-bottom: 1px solid #edf1f5;
   vertical-align: middle;
   text-align: left;
   transition: background 300ms ease;
@@ -146,6 +183,11 @@ td {
   -moz-transition: background 300ms ease;
   -webkit-transition: background 300ms ease;
 }
+@media (prefers-color-scheme: dark) {
+  td {
+    border-color: #424242;
+  }
+}
 
 td a {
   display: block;
@@ -260,16 +302,24 @@ tr.parent a[href^="/"] {
   padding: 0;
   margin: 0;
 }
+
 .breadcrumb li {
+  color: rgb(154, 154, 154);
   display: inline-block;
-    line-height: 26px;
+  line-height: 10px;
-    margin: 0 9px 0 -10px;
+  margin: 0 9px 20px -10px;
   padding: 0 15px;
   position: relative;
 }
+@media (prefers-color-scheme: dark) {
+  .breadcrumb li {
+    color: rgb(100, 100, 100);
+  }
+}
+
 .breadcrumb li::before,
 .breadcrumb li::after {
-    border-right: 1px solid #666666;
+  border-right: 1.5px solid #000;
   content: '';
   display: block;
   height: 50%;
@@ -280,6 +330,13 @@ tr.parent a[href^="/"] {
   z-index: -1;
   transform: skewX(45deg);
 }
+@media (prefers-color-scheme: dark) {
+  .breadcrumb li::before,
+  .breadcrumb li::after {
+    border-color: #fff;
+  }
+}
+
 .breadcrumb li::after {
   bottom: 0;
   top: auto;
@@ -295,8 +352,3 @@ tr.parent a[href^="/"] {
   letter-spacing: -1px;
   text-decoration: none;
 }
-
-.breadcrumb li:nth-of-type(1) a { color: hsl(0, 0%, 70%); }
-.breadcrumb li:nth-of-type(2) a { color: hsl(0, 0%, 65%); }
-.breadcrumb li:nth-of-type(3) a { color: hsl(0, 0%, 50%); }
-.breadcrumb li:nth-of-type(4) a { color: hsl(0, 0%, 45%); }