From 96b8f3ccef13b79b0162e4dedda3eb9cd0c0c0bd Mon Sep 17 00:00:00 2001
From: aghArdeshir <ardeshirizadinl@gmail.com>
Date: Wed, 2 Aug 2023 22:20:52 +0200
Subject: [PATCH] invert more pictures and iprove dark theme

---
 ...inger-devices-in-mackielogic-control-mode.html |  5 ++++-
 include/comparing-aux-sends-and-subgroups.html    | 12 ++++++++++--
 include/control-surfaces-countourdesign.html      |  6 +++++-
 include/control-surfaces-novation-lcxl.html       |  6 +++++-
 include/control-surfaces-steinberg-cc121.html     |  6 +++++-
 include/control-surfaces-tascam-us-2400.html      |  6 +++++-
 include/monitor-signal-flow.html                  | 15 ++++++++++++---
 page-template.html                                | 11 +++++++++++
 source/css/screen.css                             | 11 +++++++++++
 9 files changed, 68 insertions(+), 10 deletions(-)

diff --git a/include/behringer-devices-in-mackielogic-control-mode.html b/include/behringer-devices-in-mackielogic-control-mode.html
index 386a662..ccd34c5 100644
--- a/include/behringer-devices-in-mackielogic-control-mode.html
+++ b/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>
diff --git a/include/comparing-aux-sends-and-subgroups.html b/include/comparing-aux-sends-and-subgroups.html
index 7341be3..716bc5d 100644
--- a/include/comparing-aux-sends-and-subgroups.html
+++ b/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>
diff --git a/include/control-surfaces-countourdesign.html b/include/control-surfaces-countourdesign.html
index 584a587..ce37c1a 100644
--- a/include/control-surfaces-countourdesign.html
+++ b/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)
diff --git a/include/control-surfaces-novation-lcxl.html b/include/control-surfaces-novation-lcxl.html
index d38069d..72bb789 100644
--- a/include/control-surfaces-novation-lcxl.html
+++ b/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>
diff --git a/include/control-surfaces-steinberg-cc121.html b/include/control-surfaces-steinberg-cc121.html
index 6a3141a..30616c2 100644
--- a/include/control-surfaces-steinberg-cc121.html
+++ b/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>
diff --git a/include/control-surfaces-tascam-us-2400.html b/include/control-surfaces-tascam-us-2400.html
index 7b61b3c..40dc656 100644
--- a/include/control-surfaces-tascam-us-2400.html
+++ b/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>
diff --git a/include/monitor-signal-flow.html b/include/monitor-signal-flow.html
index 5560d4b..51b05f0 100644
--- a/include/monitor-signal-flow.html
+++ b/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>
diff --git a/page-template.html b/page-template.html
index f2e8ead..19c3d59 100644
--- a/page-template.html
+++ b/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>
diff --git a/source/css/screen.css b/source/css/screen.css
index 2337e19..9b8a296 100644
--- a/source/css/screen.css
+++ b/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;
+}