add themechanger along with dark theme

build.py

@@ -590,11 +590,12 @@ for header in fileStruct:
 	# but the basic fundamental organizing unit WRT content is still the
 	# chapter.
 	githubedit = ''
+	themechanger = '<span style="float:right;padding: 0 5px 5px 5px;"><button class="theme-changer" onclick="changetheme()" title="Change Theme"></button></span>'
 
 	if level > 0:
 		if 'include' in header:
 			srcFile = open('include/' + header['include'])
-			githubedit = '<span style="float:right;"><a title="Edit in GitHub" href="' + global_githuburl + header['include'] + '"><img src="/images/github.png" alt="Edit in GitHub"/></a></span>'
+			githubedit = '<span style="float:right;padding:5px;"><a class="github-link" title="Edit in GitHub" href="' + global_githuburl + header['include'] + '"><img src="/images/github.png" alt="Edit in GitHub"/></a></span>'
 			content = srcFile.read()
 			srcFile.close()
 
@@ -660,6 +661,7 @@ for header in fileStruct:
 	page = page.replace('{% tree %}', sidebar)
 	page = page.replace('{% prevnext %}', prevnext)
 	page = page.replace('{% githubedit %}', githubedit)
+	page = page.replace('{% themechanger %}', themechanger)
 	page = page.replace('{% breadcrumbs %}', breadcrumbs)
 	page = page.replace('{{ content }}', content + more)
 
@@ -685,6 +687,7 @@ page = page.replace('{% tree %}', sidebar)
 page = page.replace('{{ content }}', toc)
 page = page.replace('{% prevnext %}', '')
 page = page.replace('{% githubedit %}', '')
+page = page.replace('{% themechanger %}', themechanger)
 page = page.replace('{% breadcrumbs %}', '')
 
 os.mkdir(global_site_dir + 'toc', 0o775)

include/aux-sends.html

@@ -63,8 +63,8 @@ channel strip.
 
 <p>
     The color of the processor will reflect this pre/post position (red for
-    <span style="color:darkred;">Pre</span>, green for <span
-    style="color:darkgreen;">Post</span>). Dragging and dropping the send inside
+    <span class="for-red">Pre</span>, green for <span
+    class="for-green">Post</span>). Dragging and dropping the send inside
     the processor box before or after the Fader processor changes the type of
     fader accordingly.
 </p>

page-template.html

@@ -60,6 +60,7 @@
 
 				{% breadcrumbs %}
 				{% githubedit %}
+				{% themechanger %}
 
 				<h1 class="title">{{ page.title }}</h1>
 
@@ -83,6 +84,20 @@
 			var e = document.getElementsByTagName('body')[0];
 			e.className += ' mac';  // class magic for Cmd vs. Ctrl keys.
 		}
+
+		function changetheme () {
+			if (document.body.classList.contains('dark-theme')) {
+				document.body.classList.remove('dark-theme');
+			} else {
+				document.body.classList.add('dark-theme');
+			}
+
+			localStorage.setItem('dark-theme', document.body.classList.contains('dark-theme'));
+		}
+
+		if (localStorage.getItem('dark-theme') === 'true') {
+			changetheme();
+		}
 	</script>
 
 </body>

source/css/screen.css

@@ -280,3 +280,138 @@ p.subsection {
     margin-top: 0px;
   }
 }
+
+.for-green {
+  color:darkgreen;
+}
+
+.for-red {
+  color:darkred;
+}
+
+.github-link {
+  background-image: url(/images/github.png);
+  background-size: 32px 32px;
+  width: 32px;
+  height: 32px;
+  display: inline-block;
+}
+
+.theme-changer {
+  background:none;
+  background-image: url(/images/contrast.png);
+  background-size: 32px 32px;
+  width: 32px;
+  height: 32px;
+  display: inline-block;
+  border:none;
+  margin-left: -5px;
+}
+
+/* dark theme */
+body.dark-theme > .container-fluid {
+  background-color: #222222;
+  color: #f7f1ff;
+}
+
+body.dark-theme #content {
+  background-color: #222222;
+  color: #f7f1ff;
+  min-height: 100vh;;
+}
+
+body.dark-theme #content #luaref table.classmembers td.doc div.dox,
+body.dark-theme #content div.note,
+body.dark-theme #content p.well,
+body.dark-theme #content p.note {
+  background-color: #323132;
+}
+
+body.dark-theme #content #luaref h3.pointerclass,
+body.dark-theme #content #luaref h3.class,
+body.dark-theme #content #luaref h3.array,
+body.dark-theme #content #luaref h3.enum  {
+  color: black;
+}
+
+body.dark-theme #content figure img,
+body.dark-theme #content kbd.menu,
+body.dark-theme #content kbd.option,
+body.dark-theme #content kbd.optoff,
+body.dark-theme #content kbd.input {
+  background-color: white;
+}
+
+body.dark-theme #content .warning {
+background-color: #995555;
+}
+
+body.dark-theme #content table tr:nth-child(2n+1) {
+  background-color: #191919;
+}
+
+body.dark-theme #content table tr:nth-child(2n) {
+  background-color: #222222;
+}
+
+body.dark-theme #content kbd.cmd.lin::before {
+  color: darkgreen;
+}
+
+body.dark-theme #content .github-link {
+  background-image: url(/images/github-light.png);
+}
+
+body.dark-theme #content .theme-changer {
+  background-image: url(/images/contrast-light.png);
+}
+
+body.dark-theme #content .for-green {
+  color:lightgreen;
+}
+
+body.dark-theme #content .for-red {
+  color:lightcoral;
+}
+
+body.dark-theme #content .fixme {
+  background-color: rebeccapurple;
+}
+
+body.dark-theme #content a {
+  color: #49abff;
+}
+
+body.dark-theme #content .pager li > a,
+body.dark-theme #content .pager li > span {
+  background-color: #202020;
+}
+
+body.dark-theme #content .breadcrumb {
+  background-color: #212a30;
+}
+
+body.dark-theme #content .breadcrumb > .active {
+  color: #b7b7b7;
+}
+
+body.dark-theme #content #luaref div.code samp {
+  color: #007900;
+}
+
+body.dark-theme #content code a {
+  color: #006ac6
+}
+
+body.dark-theme #content div.luafooter {
+  color: white;
+}
+
+body.dark-theme #tree {
+  background-color: black;
+}
+
+body.dark-theme #tree a {
+  color: white;
+  text-shadow: 0 0 0 white;
+}