From 4685121d37b1b2fe0bb13955bd0dbfa2caf3889d Mon Sep 17 00:00:00 2001
From: Francis Lavoie <lavofr@gmail.com>
Date: Sat, 28 Mar 2020 11:45:13 -0400
Subject: [PATCH] Implement light/dark theme toggle

---
 src/includes/docs-head.html     |   5 ++
 src/includes/docs-nav.html      |  10 +++
 src/resources/css/docs-dark.css | 101 ++++++++++++++++++++++++++++++
 src/resources/css/docs.css      | 106 --------------------------------
 4 files changed, 116 insertions(+), 106 deletions(-)
 create mode 100644 src/resources/css/docs-dark.css

diff --git a/src/includes/docs-head.html b/src/includes/docs-head.html
index c746d68..47d5786 100644
--- a/src/includes/docs-head.html
+++ b/src/includes/docs-head.html
@@ -1,5 +1,10 @@
 {{include "/includes/head.html"}}
+<!-- https://github.com/GoogleChromeLabs/dark-mode-toggle -->
+<script type="module" src="https://unpkg.com/dark-mode-toggle"></script>
+
 <link rel="stylesheet" href="/resources/css/docs.css">
+<link rel="stylesheet" href="/resources/css/docs-dark.css" media="(prefers-color-scheme: dark)">
 <link rel="stylesheet" href="/resources/css/chroma.css">
+
 <script src="/resources/js/jquery-3.4.1.min.js"></script>
 <script src="/resources/js/docs.js"></script>
\ No newline at end of file
diff --git a/src/includes/docs-nav.html b/src/includes/docs-nav.html
index 9d006b3..5c81e1e 100644
--- a/src/includes/docs-nav.html
+++ b/src/includes/docs-nav.html
@@ -42,4 +42,14 @@
 		<li><a href="/docs/logging">How Logging Works</a></li>
 		<li><a href="/docs/architecture">Caddy Architecture</a></li>
 	</ul>
+
+	<!-- https://github.com/GoogleChromeLabs/dark-mode-toggle -->
+	<dark-mode-toggle
+		id="dark-mode-toggle-1"
+		appearance="switch"
+		light="Light"
+		dark="Dark"
+		permanent="true"
+		style="margin: 32px 0 16px 16px;"
+	></dark-mode-toggle>
 </nav>
\ No newline at end of file
diff --git a/src/resources/css/docs-dark.css b/src/resources/css/docs-dark.css
new file mode 100644
index 0000000..743e102
--- /dev/null
+++ b/src/resources/css/docs-dark.css
@@ -0,0 +1,101 @@
+body {
+	background-color: #060e17;
+	color: #bdd6f7;
+}
+
+#search {
+	background: rgb(28, 52, 79);
+	color: #bdd6f7;
+}
+#search:focus {
+	background: rgb(46, 70, 96);
+}
+
+#paper1,
+#paper2 {
+	background-color: #030a11;
+}
+.paper3 {
+	background-color: #051628;
+}
+
+#logo {
+	/* TODO: Add some color */
+	filter: invert(1) opacity(.35);
+}
+
+#logo-docs {
+	color: #5aa3dc;
+}
+
+.breadcrumbs {
+	color: #5aa3dc;
+}
+
+main nav li a {
+	color: #668d9b;
+}
+
+main nav ul li a:hover {
+	color: #5aa3dc;
+}
+
+main nav ul li a.current {
+	background-color: #061b35;
+}
+
+.breadcrumbs {
+	border-color: #061b35;
+}
+
+h1 {
+	color: #5aa3dc;
+}
+
+code {
+	background-color: #122844;
+}
+
+code.cmd {
+	background-color: #000;
+	color: #ccc;
+}
+
+.json .key a:not([href]) {
+	color: #bdd6f7
+}
+
+#hovercard,
+.arrow-box {
+	background-color: #0a192b; 
+}
+
+.arrow-box:after {
+	border-bottom-color: #0a192b;
+}
+
+#hovercard .module-link:hover {
+	background: #0f2c50;
+}
+
+#hovercard .module-link-description {
+	color: rgb(167, 167, 167);
+}
+
+#hovercard-namespace-box,
+#hovercard-inline-link {
+	border-color: #0a2b53;
+}
+
+article aside.tip {
+	color: #8c81e4;
+}
+
+th {
+	background-color: #142638;
+}
+
+th,
+td {
+	border-bottom-color: #233444;
+}
\ No newline at end of file
diff --git a/src/resources/css/docs.css b/src/resources/css/docs.css
index 9582d70..4d66bc9 100644
--- a/src/resources/css/docs.css
+++ b/src/resources/css/docs.css
@@ -805,109 +805,3 @@ td code {
 		display: none;
 	}
 }
-
-
-
-@media (prefers-color-scheme: dark) {
-	body {
-		background-color: #060e17;
-		color: #bdd6f7;
-	}
-
-	#search {
-		background: rgb(28, 52, 79);
-		color: #bdd6f7;
-	}
-	#search:focus {
-		background: rgb(46, 70, 96);
-	}
-
-	#paper1,
-	#paper2 {
-		background-color: #030a11;
-	}
-	.paper3 {
-		background-color: #051628;
-	}
-
-	#logo {
-		/* TODO: Add some color */
-		filter: invert(1) opacity(.35);
-	}
-
-	#logo-docs {
-		color: #5aa3dc;
-	}
-
-	.breadcrumbs {
-		color: #5aa3dc;
-	}
-
-	main nav li a {
-		color: #668d9b;
-	}
-
-	main nav ul li a:hover {
-		color: #5aa3dc;
-	}
-
-	main nav ul li a.current {
-		background-color: #061b35;
-	}
-
-	.breadcrumbs {
-		border-color: #061b35;
-	}
-
-	h1 {
-		color: #5aa3dc;
-	}
-
-	code {
-		background-color: #122844;
-	}
-
-	code.cmd {
-		background-color: #000;
-		color: #ccc;
-	}
-	
-	.json .key a:not([href]) {
-		color: #bdd6f7
-	}
-
-	#hovercard,
-	.arrow-box {
-		background-color: #0a192b; 
-	}
-
-	.arrow-box:after {
-		border-bottom-color: #0a192b;
-	}
-
-	#hovercard .module-link:hover {
-		background: #0f2c50;
-	}
-
-	#hovercard .module-link-description {
-		color: rgb(167, 167, 167);
-	}
-
-	#hovercard-namespace-box,
-	#hovercard-inline-link {
-		border-color: #0a2b53;
-	}
-
-	article aside.tip {
-		color: #8c81e4;
-	}
-
-	th {
-		background-color: #142638;
-	}
-
-	th,
-	td {
-		border-bottom-color: #233444;
-	}
-}