prevent eye-bleed

_sass/base/_root.scss

@@ -49,3 +49,19 @@
   --transition-slow: 0.3s ease;
 
 }
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --rgb-base: 4, 6, 8;
+    --rgb-base-dark: 3, 19, 34;
+    --rgb-base-darker: 5, 63, 118;
+    --rgb-base-darkest: var(--rgb-base-darker);
+    --rgb-grey: 236, 239, 244;
+    --rgb-grey-light: 241, 244, 249;
+    --rgb-blue: 65, 146, 223;
+    --rgb-blue-light: 121, 179, 233;
+    --color-base-dark: var(--color-base);
+    --color-black: rgb(var(--rgb-white));
+    --color-white: rgb(var(--rgb-base-dark));
+  }
+}

_sass/base/_rouge.scss

@@ -65,3 +65,53 @@
   .il  { color: #646e78; } /* Literal.Number.Integer.Long */
 
 }
+
+@media (prefers-color-scheme: dark) {
+  .highlight {
+    background-color: #122b3b;
+
+    .gl { color: #dee5e7; background-color: #4e5d62; }
+    .gp { color: #a8e1fe; }
+    .c, .cd, .cm, .c1, .cs { color: #6c8b9f; font-style: italic; }
+    .cp { color: #b2fd6d; font-style: italic; }
+    .err { color: #fefeec; background-color: #c00; }
+    .gr { color: #c00; font-style: italic; }
+    .k, .kd, .kv { color: #f6dd62; }
+    .o, .ow { color: #4df4ff; }
+    .p, .pi { color: #4df4ff; }
+    .gd { color: #c00; }
+    .gi { color: #b2fd6d; }
+    .ge { font-style: italic; }
+    .gt { color: #dee5e7; background-color: #4e5d62; }
+    .kc { color: #f696db; }
+    .kn { color: #ffb000; }
+    .kp { color: #ffb000; }
+    .kr { color: #ffb000; }
+    .gh { color: #ffb000; }
+    .gu { color: #ffb000; }
+    .kt { color: #b2fd6d; }
+    .no { color: #b2fd6d; }
+    .nc { color: #b2fd6d; }
+    .nd { color: #b2fd6d; }
+    .nn { color: #b2fd6d; }
+    .bp { color: #b2fd6d; }
+    .ne { color: #b2fd6d; }
+    .nl { color: #ffb000; }
+    .nt { color: #ffb000; }
+    .m, .mf, .mh, .mi, .il, .mo, .mb, .mx { color: #f696db; }
+    .ld { color: #f696db; }
+    .ss { color: #f696db; }
+    .s, .sb, .sd, .s2, .sh, .sx, .sr, .s1 { color: #fff0a6; }
+    .se { color: #4df4ff; }
+    .sc { color: #4df4ff; }
+    .si { color: #4df4ff; }
+    .nb {font-weight: bold; }
+    .ni { color: #999; }
+    .w { color: #bbb; }
+    .go { color: #bbb; }
+    .nf { color: #a8e1fe; }
+    .py { color: #a8e1fe; }
+    .na { color: #a8e1fe; }
+    .nv, .vc, .vg, .vi { color: #a8e1fe; }
+  }
+}

_sass/modules/_page.scss

@@ -431,4 +431,14 @@
 
   }
 
+  @media (prefers-color-scheme: dark) {
+    .color-schemable img {
+      filter: invert(100%);
+    }
+
+    article .highlight {
+      background: var(--color-base);
+    }
+  }
+
 }

index.html

@@ -49,7 +49,7 @@ <h3>Why not just run Capistrano, Kubernetes or Docker Swarm?</h3>
       <h3>Name</h3>
       <p>Kamal is named after <a href="https://exploration.marinersmuseum.org/object/kamal/">the ancient Arab navigational tool</a> used by sailors to keep course by determining their latitude via the Pole Star. (Kamal was formerly known as MRSK).</p>
 
-      <figure>
+      <figure class="color-schemable">
         <picture>
           <source type="image/webp" srcset="{{ '/assets/images/kamal.webp' | absolute_url }}">
           <img src="{{ '/assets/images/kamal.png' | absolute_url }}" alt="A person uses a Kamal, an ancient Arab navigational tool, to measure the angle between the horizon and the Pole Star at night by the sea.">