From 13d69a13f1da0e431c38802e2762432a5194e093 Mon Sep 17 00:00:00 2001
From: Jose Diaz-Gonzalez <email@josediazgonzalez.com>
Date: Thu, 4 Mar 2021 23:06:31 -0500
Subject: [PATCH] docs: add automatic dark-mode to docs site

---
 docs/assets/style.css | 80 +++++++++++++++++++++++++++++++++++++++++--
 docs/home.html        | 29 ----------------
 docs/template.html    |  9 -----
 3 files changed, 77 insertions(+), 41 deletions(-)

diff --git a/docs/assets/style.css b/docs/assets/style.css
index 1e5f7d331..c4de441a0 100644
--- a/docs/assets/style.css
+++ b/docs/assets/style.css
@@ -1,6 +1,9 @@
+:root {
+  color-scheme: light dark;
+}
 body {
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-  font-size: 62.5%; 
+  font-size: 62.5%;
   font-weight: 400;
   padding-bottom: 40px;
   color: #5a5a5a;
@@ -231,7 +234,7 @@ h1 {
 }
 .list-group-item {
   border: none;
-  font-size: 1.1em;
+  font-size: 14px;
   font-weight: normal;
   padding: .2rem .5rem;
   color: #157577;
@@ -317,7 +320,7 @@ a.list-group-item {
   right: 0;
   width: auto;
   height: auto;
-  font-size: 1.2em;
+  font-size: 1em;
   border-radius: 0 0 0 5px;
   padding: 0 0.5em;
   text-shadow: none;
@@ -654,3 +657,74 @@ ul.fas li .fa-large:before, ul.fas li .fa-large:before {
     width: 200px;
   }
 }
+@media (prefers-color-scheme: dark) {
+    body {
+        background-color: rgb(13, 17, 23);
+    }
+    .header {
+        background-color: #075c9b;
+    }
+    .blurb {
+        filter: invert(1);
+    }
+    .slack-channel {
+        background-color: #110e09;
+    }
+
+    code {
+        background-color: rgb(22, 27, 34);
+        color: #bbb;
+    }
+    pre {
+        background-color: rgb(22, 27, 34);
+        color: #bbb;
+        border: 1px solid #555;
+        box-shadow: 0 0 0 3px #111;
+    }
+    .highlight-show-language-label {
+      filter: invert(1);
+    }
+    .list-group-item {
+        background-color: rgb(13, 17, 23);
+    }
+    blockquote {
+        background-color: rgba(0, 82, 204, 0.18);
+        border-left: 4px solid rgba(108, 169, 255, 0.3);;
+        color: rgb(108, 169, 255);
+    }
+    blockquote.warning {
+        border-left: 4px solid rgba(239, 136, 84, 0.3);
+        background-color: rgba(235, 100, 32, 0.18);
+        color: rgb(239, 136, 84);
+    }
+    blockquote.new-as-of {
+        border-left: 4px solid rgba(11, 216, 73, 0.3);
+        background-color: rgba(9, 171, 60, 0.18);
+        color: rgb(11, 216, 73);
+    }
+    .dev-warning, .outdated-warning {
+        background-color: #ccb430
+    }
+    .table-striped tbody tr:nth-of-type(odd) {
+      background-color: #080808
+    }
+    .table-hover tbody tr:hover {
+      background-color: #3b3b3b;
+      color: #bbb;
+    }
+    .table td, .table th {
+      border-top: 1px solid #131110;
+    }
+    .table thead th {
+      border-bottom: 2px solid #131110;
+    }
+    .markdown-body {
+      color: rgb(184, 181, 171);
+    }
+    .markdown-body h1 {
+      color: #bbb;
+    }
+    .markdown-body h2, .markdown-body h3, .markdown-body h4 {
+      color: #aaa;
+    }
+}
diff --git a/docs/home.html b/docs/home.html
index ac6ac94da..d93fa7c31 100644
--- a/docs/home.html
+++ b/docs/home.html
@@ -36,35 +36,6 @@
     <link href="https://cdn.jsdelivr.net/gh/dokku/dokku@v0.24.0/docs/assets/style.css" rel="stylesheet">
     <!-- <link href="/dokku/docs/assets/style.css" rel="stylesheet"> -->
     <style>
-      .sponsors {
-        background-color: #272822;
-        color: #FCFCFC;
-      }
-      .sponsors a {
-        color: #f0ad4e;
-      }
-      .sponsors .backer img,
-      .sponsors .sponsor img {
-        -webkit-border-radius: 3px;
-        border-radius: 3px;
-        border: 8px solid gray;
-        margin: 20px auto 20px auto;
-        max-width: 192px;
-      }
-      .sponsors .backer img {
-        -webkit-border-radius: 50%;
-        border-radius: 50%;
-        border: 0;
-      }
-      .sponsors img:hover {
-        -moz-box-shadow: 4px 4px 8px 0px rgba(0,0,0,0.75);
-        -webkit-box-shadow: 4px 4px 8px 0px rgba(0,0,0,0.75);
-        box-shadow: 0px 0px 32px 0px rgba(0,0,0,0.75);
-      }
-      .sponsors .fund-link {
-        display: block;
-        font-size: .8em;
-      }
     </style>
   </head>
   <body>
diff --git a/docs/template.html b/docs/template.html
index 88aa772b9..7eb5036bd 100644
--- a/docs/template.html
+++ b/docs/template.html
@@ -46,15 +46,6 @@
     <!-- <link href="/dokku/docs/assets/style.css" rel="stylesheet"> -->
     <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet">
     <style>
-      body {
-        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-      }
-      .list-group-item {
-        font-size: 14px;
-      }
-      .markdown-body {
-        line-height: 1.5;
-      }
     </style>
   </head>
   <body>