Dark theme

styles.css

@@ -21,7 +21,7 @@ table.code {
 
 thead {
     font-weight: bold;
-    border-bottom: 2px solid #000;
+    border-bottom: 2px solid currentColor;
 }
 
 td {
@@ -117,6 +117,7 @@ details {
     overflow-x: auto;
     max-width: 100%;
 }
+
 details code {
     background: #fff;
 }
@@ -157,13 +158,58 @@ table.nav td {
 }
 
 footer {
+    border-top: 1px solid #0005;
     width: 100%;
     text-align: center;
-    margin-top: 8px;
+    margin-top: 32px;
+    padding-top: 8px;
 }
+
 footer>*:first-child {
     float: left;
 }
+
 footer>*:last-child {
     float: right;
 }
+
+
+@media (prefers-color-scheme: dark) {
+    body {
+        background-color: #000;
+        color: #fff;
+    }
+
+    footer {
+        border-top: 1px solid #fff5;
+    }
+
+    td {
+        border: 1px solid #777;
+    }
+
+    code {
+        background-color: #150a0d;
+    }
+
+    .highlight, img:not(.graphic) {
+        filter: invert(1);
+    }
+
+    a, a:visited {
+        text-decoration: none;
+        color: #f5417d
+    }
+
+    a:hover {
+        color: #dc3264
+    }
+
+    details {
+        background: #1c0d11;
+        border-color: #3b2b2f;
+    }
+    details code {
+        background: #000;
+    }
+}

templates/base.html

@@ -7,7 +7,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>{% block title %}{% endblock %}{% if self.title() %} | {% endif %}{% block roottitle %}Arcade Reverse Engineering{% endblock %}</title>
 
-    <link rel="stylesheet" href="{{ROOT}}/styles.css?ver=5">
+    <link rel="stylesheet" href="{{ROOT}}/styles.css?ver=7">
     <link rel="stylesheet" href="{{ROOT}}/tango.css">
 
     <script async src="https://www.googletagmanager.com/gtag/js?id=G-LG6C6HT317"></script>

templates/pages/flags.html

@@ -2,6 +2,6 @@
 {% block title %}Curious flags{% endblock %}
 {% block body %}
 <br>
-<img src="{{ROOT}}/images/flags/xeai.png" >
-<img src="{{ROOT}}/images/flags/card.png" >
+<img src="{{ROOT}}/images/flags/xeai.png" class="graphic">
+<img src="{{ROOT}}/images/flags/card.png" class="graphic">
 {% endblock %}

templates/pages/getting_started.html

@@ -113,9 +113,9 @@
 <h2>Setting up Visual Studio</h2>
 <p>Saved the worst for last, I'm afraid. Once visual studio starts, drag the exe you use to start the game into it. Odds
     are this is <code>spice.exe</code>. Visual Studio, in stark contrast to Ghidra, is totally barren.</p>
-<img src="{{ROOT}}/images/vs.png">
+<img src="{{ROOT}}/images/vs.png" class="graphic">
 <p>When you press the start button, VS will likely ask you to restart it in elevated mode; go ahead and do that.</p>
-<img src="{{ROOT}}/images/vs2.png">
+<img src="{{ROOT}}/images/vs2.png" class="graphic">
 <p>Wow. That's a lot more stuff, but it all seems a bit empty? As a debugger, VS only allows you to poke around while
     the program is paused. We can manually pause using the pause icon at the top, which would normally be sufficient.
     Unforunately, in our case, we're looking at a far bigger project. Odds are when you pause the program you will get a
@@ -143,7 +143,7 @@
     This is, to the best of my knowledge, an issue in VS. Delete the breakpoint, and this time start the program then
     hit the pause button immediatly. Only once paused, re-add the breakpoint, then continue execution.
 </p>
-<img src="{{ROOT}}/images/vs3.png">
+<img src="{{ROOT}}/images/vs3.png" class="graphic">
 <p>The breakpoint should be hit almost right away. This is because that address is one of the logging functions :). In
     the bottom left, a list of registers are shown. This particular function takes its values via the stack, so paste
     the ESP register's value into the address box of the memory viewer. Right clicking, we can switch to

templates/pages/server.html

@@ -227,7 +227,7 @@ def pcbevent(call, resp):
 <p>For real, this time, we can start the game.</p>
 
 <figure>
-    <img width="256" src="./images/game_started.png">
+    <img width="256" src="./images/game_started.png" class="graphic">
     <figcaption>It lives!</figcaption>
 </figure>