diff --git a/media/css/main.css b/media/css/main.css
index 5e26a55..3a5d3be 100644
--- a/media/css/main.css
+++ b/media/css/main.css
@@ -26,6 +26,35 @@ body {
   font-size: 11.5pt;
 }
 
+@media (prefers-color-scheme: dark) {
+  body {
+    color: #F3F5F9;
+    background-color: #212121;
+  }
+
+  .navbar {
+    color: #F3F5F9 !important;
+    background-color: #212121 !important;
+  }
+
+  input, .btn-default {
+    background-color: #4A4A4A !important;
+    border-color: #6B6B6B !important;
+    color: #F3F5F9 !important;
+  }
+
+  .table th {
+    background-color: #4A4A4A !important;
+    border-color: #6B6B6B !important;
+    color: #F3F5F9 !important;
+  }
+
+  .table td {
+    border-color: #6B6B6B !important;
+    color: #F3F5F9 !important;
+  }
+}
+
 p {
   margin-bottom: 0.5rem;
 }
@@ -127,6 +156,16 @@ b, strong, th {
   color: #474747 !important;
 }
 
+@media (prefers-color-scheme: dark) {
+  a:hover, a:active {
+    color: #50B0F0;
+  }
+
+  b, strong, th {
+    color: #F3F5F9 !important;
+  }
+}
+
 i, em {
   font-style: italic;
 }
@@ -177,6 +216,12 @@ p, ul, ol, dl, table {
   background-color: #e7eae8;
 }
 
+@media (prefers-color-scheme: dark) {
+  .pg-bg-gray {
+    background-color: #4A4A4A;
+  }
+}
+
 .pg-border-color-blue {
   border-color: #336791;
 }
@@ -679,6 +724,17 @@ code,
   font-weight: 400;
 }
 
+@media (prefers-color-scheme: dark) {
+  pre,
+  code,
+  #docContent kbd,
+  #docContent tt.LITERAL,
+  #docContent tt.REPLACEABLE {
+    color: inherit !important;
+    background-color: #4A4A4A;
+  }
+}
+
 #docContent .note pre,
 #docContent .note code,
 #docContent .note kbd,
@@ -736,7 +792,7 @@ code,
   font-weight: 600;
 }
 
- #docContent table.table,
+#docContent table.table,
  #docContent table.informaltable,
  #docContent table.CALSTABLE {
    background-color: #e0ecef;
@@ -747,6 +803,15 @@ code,
    margin: 2ex 0;
  }
 
+@media (prefers-color-scheme: dark) {
+  #docContent table.table,
+  #docContent table.informaltable,
+  #docContent table.CALSTABLE {
+    background-color: #4A4A4A;
+    border: 2px solid #6B6B6B;
+  }
+}
+
 #docContent table.table th,
 #docContent table.informaltable th,
 #docContent table.CALSTABLE th {
@@ -754,6 +819,15 @@ code,
   padding: 0.5ex 0.5ex;
 }
 
+@media (prefers-color-scheme: dark) {
+  #docContent table.table th,
+  #docContent table.informaltable th,
+  #docContent table.CALSTABLE th {
+    border-color: #6B6B6B !important;
+    color: #F3F5F9 !important;
+  }
+}
+
 #docContent table.table th[align="left"],
 #docContent table.table td[align="left"] {
   text-align: left;
@@ -791,6 +865,16 @@ code,
   padding: 0.5ex 0.5ex;
 }
 
+@media (prefers-color-scheme: dark) {
+  #docContent table.table td,
+  #docContent table.informaltable td,
+  #docContent table.CALSTABLE td {
+    border-color: #6B6B6B !important;
+    background-color: #212121 !important;
+    color: #F3F5F9 !important;
+  }
+}
+
 /** We use some overrides for code in tables, which makes it more readable */
 #docContent table.table tt,
 #docContent table.informaltable tt,
@@ -1004,12 +1088,28 @@ code,
   background-color: #d1ecf1;
 }
 
+@media (prefers-color-scheme: dark) {
+  #docContent blockquote.NOTE,
+  #docContent .note {
+    border-color: #84c578;
+    background-color: #4A4A4A;
+  }
+}
+
 #docContent blockquote.TIP,
 #docContent .tip {
   border-color: #84c578;
   background-color: #e8f7e6;
 }
 
+@media (prefers-color-scheme: dark) {
+  #docContent blockquote.TIP,
+  #docContent .tip {
+    border-color: #84c578;
+    background-color: #4A4A4A;
+  }
+}
+
 #docContent blockquote.WARNING,
 #docContent .warning {
   background-color: #fbeded;
@@ -1023,6 +1123,13 @@ code,
   color: initial;
 }
 
+@media (prefers-color-scheme: dark) {
+  #docContent blockquote.TIP h3, #docContent blockquote.NOTE h3, #docContent blockquote.CAUTION h3, #docContent blockquote.WARNING h3,
+  #docContent .tip h3, #docContent .note h3, #docContent .caution h3, #docContent .warning h3 {
+    color: #F3F5F9;
+  }
+}
+
 #docContent blockquote.WARNING td.c2, #docContent blockquote.WARNING td,
 #docContent .warning td.c2, #docContent .warning td {
   border: 1px solid #d58181;
@@ -1109,6 +1216,27 @@ code,
 
 #pgContentWrap a, #docContent a {
   color: #840032;
+  text-decoration: none;
+  -moz-transition: color .2s ease-in-out;
+  -webkit-transition: color .2s ease-in-out;
+  -ms-transition: color .2s ease-in-out;
+  transition: color .2s ease-in-out;
+}
+
+#pgContentWrap a:hover, #pgContentWrap a:active {
+  color: #193145;
+  text-decoration: none;
+}
+
+@media (prefers-color-scheme: dark) {
+  #pgContentWrap a, #docContent a {
+    color: #336791;
+  }
+
+  #pgContentWrap a:hover, #pgContentWrap a:active {
+    color: #50B0F0;
+    text-decoration: none;
+  }
 }
 
 #pgContentWrap {
@@ -1264,6 +1392,14 @@ input[type=checkbox]:focus {
   margin: 2px;
 }
 
+@media (prefers-color-scheme: dark) {
+  .custom-select {
+    background-color: #4A4A4A !important;
+    border-color: #6B6B6B !important;
+    color: #F3F5F9 !important;
+  }
+}
+
 /* For the thread viewer, keep the width inline with the parent element */
 #thread_select.custom-select {
   width: auto;
@@ -1382,6 +1518,7 @@ input.featurematrix_version:last-child {
 hr#featurematrix_version_divider {
   margin: 0;
 }
+
 td.fm_no {
   background-color: #ffdddd !important;
 }
@@ -1395,6 +1532,28 @@ td.fm_unk {
   background-color: #ffffaa !important;
 }
 
+@media (prefers-color-scheme: dark) {
+  td.fm_no {
+    color: #000000 !important;
+    background-color: #ff8882 !important;
+  }
+
+  td.fm_yes {
+    color: #000000 !important;
+    background-color: #89ff96 !important;
+  }
+
+  td.fm_obs {
+    color: #000000 !important;
+    background-color: #ddddff !important;
+  }
+
+  td.fm_unk {
+    color: #000000 !important;
+    background-color: #ffffaa !important;
+  }
+}
+
 /* Code of Conduct Committee */
 table.cocc-table tbody tr td:nth-child(1) {
   width: 20%;
@@ -1435,6 +1594,13 @@ table.contributor-table thead tr th {
   background-color: #e7eae8;
 }
 
+@media (prefers-color-scheme: dark) {
+  .btn-download:hover {
+    background-color: #4A4A4A;
+    border-color: #D4D4D4;
+  }
+}
+
 .download-subnav {
   display: none;
 }
diff --git a/media/js/main.js b/media/js/main.js
index 0661c06..d7e2b37 100644
--- a/media/js/main.js
+++ b/media/js/main.js
@@ -79,13 +79,22 @@ function copyScript(trigger, elem) {
  * families on the Download page
  */
 function showDistros(btn, osDiv) {
+    var default_colour = '#FFFFFF';
+    var active_colour = '#e7eae8';
+
+    // dark mode
+    if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+        default_colour = '#212121';
+        active_colour = '#4A4A4A';
+    }
+
     // Disable everything
-    document.getElementById('btn-download-bsd').style.background = '#ffffff';
+    document.getElementById('btn-download-bsd').style.background = default_colour;
     document.getElementById('download-subnav-bsd').style.display = 'none';
-    document.getElementById('btn-download-linux').style.background = '#ffffff';
+    document.getElementById('btn-download-linux').style.background = default_colour;
     document.getElementById('download-subnav-linux').style.display = 'none';
 
     // Enable the one we want
-    btn.style.background='#e7eae8';
+    btn.style.background = active_colour;
     document.getElementById(osDiv).style.display = 'block';
 }
