invert more pictures and iprove 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;position:relative;bottom:-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'] + '"></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>

include/behringer-devices-in-mackielogic-control-mode.html

@@ -331,7 +331,10 @@ The surface can be broken into 8 groups of controls:
 </p>
 
 <figure>
-  <img alt="X-Touch Mini MC mode layout" src="/images/xtouch-mini-mcp.png">
+  <img
+    alt="X-Touch Mini MC mode layout"
+    src="/images/xtouch-mini-mcp.png"
+    class="invert-in-dark">
   <figcaption>
     X-Touch Mini MC mode layout
   </figcaption>

include/comparing-aux-sends-and-subgroups.html

@@ -11,7 +11,11 @@
 </p>
 
 <figure>
-  <img width="300px" src="/images/aux_routing.png" alt="Aux signal routing">
+  <img
+    width="300px"
+    src="/images/aux_routing.png"
+    alt="Aux signal routing"
+    class="invert-in-dark">
   <figcaption>
     Aux signal routing
   </figcaption>
@@ -24,7 +28,11 @@
 </p>
 
 <figure>
-  <img width="300px" src="/images/subgroup_routes.png" alt="sub group signal routing">
+  <img
+    width="300px"
+    src="/images/subgroup_routes.png"
+    alt="sub group signal routing"
+    class="invert-in-dark">
   <figcaption>
     Sub group signal routing
   </figcaption>

include/control-surfaces-countourdesign.html

@@ -5,7 +5,11 @@
 </p>
 
 <figure>
-  <img style="width:75%;" src="/images/countourdesign-shuttle.svg" alt="ContourDesign ShuttlePRO v2 and ShuttleXpress">
+  <img
+  	style="width:75%;"
+	src="/images/countourdesign-shuttle.svg"
+	alt="ContourDesign ShuttlePRO v2 and ShuttleXpress"
+	class="invert-in-dark">
   <figcaption>
     Contour Design ShuttlePRO v1 (left), ShuttlePRO v2 (middle), and
     ShuttleXpress (right)

include/control-surfaces-novation-lcxl.html

@@ -5,7 +5,11 @@
 </p>
 
 <figure>
-  <img style="width:75%;" src="/images/novation-launch-control-xl.svg" alt="Novation Launch Control XL">
+  <img
+  	style="width:75%;"
+	src="/images/novation-launch-control-xl.svg"
+	alt="Novation Launch Control XL"
+	class="invert-in-dark">
   <figcaption>
     Novation Launch Control XL
   </figcaption>

include/control-surfaces-steinberg-cc121.html

@@ -4,7 +4,11 @@
 </p>
 
 <figure>
-  <img style="width:75%;" src="/images/steinberg-cc121.svg" alt="Steinberg CC121">
+  <img
+  	style="width:75%;"
+	src="/images/steinberg-cc121.svg"
+	alt="Steinberg CC121"
+	class="invert-in-dark">
   <figcaption>
     Steinberg CC121
   </figcaption>

include/control-surfaces-tascam-us-2400.html

@@ -7,7 +7,11 @@
 </p>
 
 <figure>
-  <img style="width:75%;" src="/images/tascam-us-2400-device.svg" alt="TASCAM US-2400">
+  <img
+    style="width:75%;"
+    src="/images/tascam-us-2400-device.svg"
+    alt="TASCAM US-2400"
+    class="invert-in-dark">
   <figcaption>
     TASCAM US-2400
   </figcaption>

include/latency-and-latency-compensation.html

@@ -51,7 +51,10 @@
   backend. While many of the concepts are true, the specifics may be different.
 </p>
 <figure>
-  <img src="/images/latency-chain.png" alt="Latency chain">
+  <img
+    src="/images/latency-chain.png"
+    alt="Latency chain"
+    class="invert-in-dark">
   <figcaption>
     Latency chain
   </figcaption>
@@ -186,7 +189,10 @@
 </p>
 
 <figure>
-  <img src="/images/jack-latency-excerpt.png" alt="Jack Latency Compensation">
+  <img
+    src="/images/jack-latency-excerpt.png"
+    alt="Jack Latency Compensation"
+    class="invert-in-dark">
   <figcaption>
     Jack Latency Compensation
   </figcaption>

include/monitor-signal-flow.html

@@ -4,7 +4,10 @@
 <h3>External Monitoring</h3>
 
 <figure class="right">
-    <img src="/images/external-monitoring.png" alt="External monitoring">
+    <img
+      src="/images/external-monitoring.png"
+      alt="External monitoring"
+      class="invert-in-dark">
     <figcaption class="center">
       External monitoring
     </figcaption>
@@ -20,7 +23,10 @@
 <h3 class="clear">Audio driver Hardware Monitoring</h3>
 
 <figure class="right">
-    <img src="/images/jack-monitoring.png" alt="Hardware Monitoring">
+    <img
+      src="/images/jack-monitoring.png"
+      alt="Hardware Monitoring"
+      class="invert-in-dark">
     <figcaption class="center">
       Hardware Monitoring
     </figcaption>
@@ -38,7 +44,10 @@
 <h3 class="clear">Software Monitoring</h3>
 
 <figure class="right">
-    <img src="/images/ardour-monitoring.png" alt="Software Monitoring">
+    <img
+      src="/images/ardour-monitoring.png"
+      alt="Software Monitoring"
+      class="invert-in-dark">
     <figcaption class="center">
       Software Monitoring
     </figcaption>

include/timecode-generators-and-slaves.html

@@ -230,7 +230,10 @@
 </p>
 
 <figure class="center">
-  <img src="/images/ltc-transport-alignment.png" alt="LTC frame alignment">
+  <img
+    src="/images/ltc-transport-alignment.png"
+    alt="LTC frame alignment"
+    class="invert-in-dark">
   <figcaption>
     LTC frame alignment for the 525/60 TV standard
   </figcaption>

page-template.html

@@ -60,6 +60,7 @@
 
 				{% breadcrumbs %}
 				{% githubedit %}
+				{% themechanger %}
 
 				<h1 class="title">{{ page.title }}</h1>
 
@@ -83,6 +84,31 @@
 			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();
+		}
+
+		// go to next page and previous page using arrow keys
+		window.addEventListener('keydown', e => {
+			if (e.target.tagName !== 'INPUT') {
+				if (e.key === 'ArrowRight') {
+					document.querySelector('.next a').click()
+				} else if (e.key === 'ArrowLeft') {
+					document.querySelector('.previous a').click()
+				}
+			}
+		})
 	</script>
 
 </body>

source/css/screen.css

@@ -280,3 +280,159 @@ 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,
+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: darkred;
+}
+
+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;
+}
+
+
+body.dark-theme #tree .active > a {
+  color: #FF8080;
+  text-shadow: 0 0 0 #FF8080;
+}
+
+body.dark-theme .invert-in-dark {
+  filter: invert(1);
+}
+
+body.dark-theme pre {
+  background: #1f1f1f;
+  color: #9cdcfe;
+}
+
+body.dark-theme .well {
+  background: darkgrey;
+  color: black;
+}