diff --git a/apaxy/theme/style.css b/apaxy/theme/style.css
index 90907ff..424b3d8 100644
--- a/apaxy/theme/style.css
+++ b/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 {
-        float: right;
-        font-size:.75em;
-        padding: .5em;
-        margin-bottom: .5em;
-        border: 1px solid #aaa;
-        border-radius: .25em;
-        width: 10em;
-        transition: width 0.25s ease;
+  background-color: rgba(0, 0, 0, 0.04);
+  float: right;
+  font-size:.75em;
+  padding: .5em;
+  margin-bottom: .5em;
+  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;
+  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;
@@ -172,83 +214,83 @@ tr.parent a[href^="/"] {
     Media query for small screens
 \*------------------------------------*/
 @media (max-width: 768px) {
-    body {
-        padding: 10px;
-    }
-    .indexcollastmod { display: none; }
-    .wrapper { max-width: 100%; }
+  body {
+    padding: 10px;
+  }
+  .indexcollastmod { display: none; }
+  .wrapper { max-width: 100%; }
 }
 
 /*------------------------------------*\
-	Error pages
+    Error pages
 /*------------------------------------*/
 /* Animation */
 @-webkit-keyframes fadeDown {
-	0% {
-		opacity: 0;
-		-webkit-transform: translateY(-20px);
-	}
-	100% {
-		opacity: 1;
-		-webkit-transform: translateY(0);
-	}
+  0% {
+    opacity: 0;
+    -webkit-transform: translateY(-20px);
+  }
+  100% {
+    opacity: 1;
+    -webkit-transform: translateY(0);
+  }
 }
 
 @-moz-keyframes fadeDown {
-	0% {
-		opacity: 0;
-		-moz-transform: translateY(-20px);
-	}
-	100% {
-		opacity: 1;
-		-moz-transform: translateY(0);
-	}
+  0% {
+    opacity: 0;
+    -moz-transform: translateY(-20px);
+  }
+  100% {
+    opacity: 1;
+    -moz-transform: translateY(0);
+  }
 }
 
 @-ms-keyframes fadeDown {
-	0% {
-		opacity: 0;
-		-ms-transform: translateY(-20px);
-	}
-	100% {
-		opacity: 1;
-		-ms-transform: translateY(0);
-	}
+  0% {
+    opacity: 0;
+    -ms-transform: translateY(-20px);
+  }
+  100% {
+    opacity: 1;
+    -ms-transform: translateY(0);
+  }
 }
 
 @-o-keyframes fadeDown {
-	0% {
-		opacity: 0;
-		-o-transform: translateY(-20px);
-	}
-	100% {
-		opacity: 1;
-		-o-transform: translateY(0);
-	}
+  0% {
+    opacity: 0;
+    -o-transform: translateY(-20px);
+  }
+  100% {
+    opacity: 1;
+    -o-transform: translateY(0);
+  }
 }
 
 @keyframes fadeDown {
-	0% {
-		opacity: 0;
-		transform: translateY(-20px);
-	}
-	100% {
-		opacity: 1;
-		transform: translateY(0);
-	}
+  0% {
+    opacity: 0;
+    transform: translateY(-20px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
 
 .fadeDown {
-	-webkit-animation:fadeDown 1s ease;
-	   -moz-animation:fadeDown 1s ease;
-	    -ms-animation:fadeDown 1s ease;
-	     -o-animation:fadeDown 1s ease;
-	        animation:fadeDown 1s ease;
+  -webkit-animation:fadeDown 1s ease;
+     -moz-animation:fadeDown 1s ease;
+      -ms-animation:fadeDown 1s ease;
+       -o-animation:fadeDown 1s ease;
+          animation:fadeDown 1s ease;
 }
 
 /* Error code display */
 .errorCode {
-	font-size: 80px;
+  font-size: 80px;
 }
 
 /*------------------------------------*\
@@ -256,47 +298,57 @@ tr.parent a[href^="/"] {
 \*------------------------------------*/
 
 .breadcrumb {
-    white-space: nowrap;
-    padding: 0;
-    margin: 0;
+  white-space: nowrap;
+  padding: 0;
+  margin: 0;
 }
+
 .breadcrumb li {
-    display: inline-block;
-    line-height: 26px;
-    margin: 0 9px 0 -10px;
-    padding: 0 15px;
-    position: relative;
+  color: rgb(154, 154, 154);
+  display: inline-block;
+  line-height: 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;
-    content: '';
-    display: block;
-    height: 50%;
-    position: absolute;
-    left: 0;
-    right: 0;
-    top: 0;
-    z-index: -1;
-    transform: skewX(45deg);
+  border-right: 1.5px solid #000;
+  content: '';
+  display: block;
+  height: 50%;
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  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;
-    transform: skewX(-45deg);
+  bottom: 0;
+  top: auto;
+  transform: skewX(-45deg);
 }
 
 .breadcrumb li:last-of-type::before,
 .breadcrumb li:last-of-type::after {
-    display: none;
+  display: none;
 }
 
 .breadcrumb li a {
-   letter-spacing: -1px;
-   text-decoration: none;
+  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%); }