invert more pictures and iprove dark theme

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/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>

page-template.html

@@ -98,6 +98,17 @@
 		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

@@ -309,6 +309,7 @@ p.subsection {
 }
 
 /* dark theme */
+body.dark-theme,
 body.dark-theme > .container-fluid {
   background-color: #222222;
   color: #f7f1ff;
@@ -425,3 +426,13 @@ body.dark-theme #tree .active > a {
 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;
+}