From 606a8a7a1a81d503d416c6610e55ea44297461c1 Mon Sep 17 00:00:00 2001
From: Fabian Homborg <FHomborg@gmail.com>
Date: Wed, 2 Jun 2021 17:12:35 +0200
Subject: [PATCH] Darkmode for docs

This uses the prefers-color-scheme media query to pick between dark and light mode,
so the user automatically gets the colorscheme they prefer.
---
 .../python_docs_theme/static/pydoctheme.css   | 66 +++++++++++++++++++
 1 file changed, 66 insertions(+)

diff --git a/doc_src/python_docs_theme/static/pydoctheme.css b/doc_src/python_docs_theme/static/pydoctheme.css
index 112dd1e75..1d0053369 100644
--- a/doc_src/python_docs_theme/static/pydoctheme.css
+++ b/doc_src/python_docs_theme/static/pydoctheme.css
@@ -1,5 +1,9 @@
 @import url("classic.css");
 
+:root {
+  color-scheme: light dark; /* both supported */
+}
+
 html {
     background: none;
     min-height: 100%;
@@ -342,3 +346,65 @@ kbd {
     background-color: #ddddea;
     font-size: 90%;
 }
+
+@media (prefers-color-scheme: dark) {
+  body {
+    background: linear-gradient(to top, #272f4f 0%,#03133a 100%);
+  }
+    div#fmain {
+        color: #DDD;
+        background-color: #151525;
+        box-shadow: 0 0 5px 1px #000;
+    }
+
+    div.body h1, div.body h2, div.body h3, div.body h4, div.body h5, div.body h6 {
+        background-color: inherit;
+        color: inherit;
+    }
+
+    .footnote, .footnote-reference {
+        background-color: #101020;
+    }
+
+    div.sphinxsidebar a, div.footer {
+        color: #BBB;
+    }
+
+    div.sphinxsidebar h3 a, div.related a, div.sphinxsidebar h3 {
+        color: #AAA;
+    }
+    .highlight {
+        background: #000;
+    }
+    kbd {
+        background-color: #111;
+        border: 1px solid #444;
+        box-shadow: 0.1em 0.1em 0.2em rgba(100,100,100,0.1);
+        color: #FFF;
+    }
+    table.docutils th {
+        background-color: #222;
+    }
+
+    table.docutils td {
+        background-color: #111;
+    }
+    input {
+        background-color: #222;
+        color: #AAA;
+    }
+
+    div.body a {
+        color: #2092da;
+    }
+    dt:target, span.highlighted {
+        background-color: #404060;
+    }
+    table.docutils {
+        border: 1px solid #222;
+    }
+
+    table.docutils td, table.docutils th {
+        border: 1px solid #222 !important;
+    }
+}