Add support for dark mode

Author: afh

flake.nix

@@ -70,10 +70,14 @@
          buildFlags = "doc";
 
          postBuild = ''
+           # Create print version of ledger manpage
            pdfroff -man -dpaper=letter -P-pletter $src/doc/ledger.1 > ledger.1.pdf
+           # Patch web version of ledger manual to support dark mode
+           sed -e 's@</style>@&<link rel="stylesheet" type="text/css" href="/stylesheets/doc.css">@' ledger3.html -i
            '';
 
          postInstall = ''
+           # Install print version of ledger manpage
            cp ledger.1.pdf $out/share/doc/ledger
            '';
        };
@@ -95,6 +99,8 @@
            runHook preBuild
            texi2pdf --batch ledger-mode.texi
            makeinfo --force --html --no-split ledger-mode.texi
+           # Patch web version of ledger mode manual to support dark mode
+           sed -e 's@</style>@&<link rel="stylesheet" type="text/css" href="/stylesheets/doc.css">@' ledger-mode.html -i
            runHook postBuild
          '';
 

source/stylesheets/darkmode.css.scss

@@ -0,0 +1,53 @@
+:root {
+  --light-color:#121212;
+  --light-background-color:#fcfcfc;
+  --light-highlight-code-background-color:#eee;
+  --light-link-color:#00e;
+  --light-visited-color:#551a8b;
+
+  --dark-color:#fefefe;
+  --dark-background-color:#212121;
+  --dark-highlight-code-background-color:#333;
+  --dark-link-color:#2997ff;
+  --dark-visited-color:#aa6fdf;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    --color:var(--light-color);
+    --background-color:var(--light-background-color);
+    --highlight-code-background-color:var(--light-highlight-code-background-color);
+    --link-color:var(--light-link-color);
+    --visited-color:var(--light-visited-color);
+  }
+}
+@media (prefers-color-scheme: dark) {
+  :root {
+    --color:var(--dark-color);
+    --background-color:var(--dark-background-color);
+    --highlight-code-background-color:var(--dark-highlight-code-background-color);
+    --link-color:var(--dark-link-color);
+    --visited-color:var(--dark-visited-color);
+  }
+}
+
+body.light-theme, body.dark-theme {
+  color:var(--toggled-color);
+  background:var(--toggled-background-color);
+  nav ul li a[href="/"] {
+    color:var(--toggled-color);
+  }
+  pre code {
+    background-color:var(--toggled-highlight-code-background-color);
+  }
+  .github-corner svg {
+    color:var(--toggled-background-color) !important;
+    fill:var(--toggled-color) !important;
+  }
+  :link {
+    color:var(--toggled-link-color);
+  }
+  :visited {
+    color:var(--toggled-visited-color);
+  }
+}

source/stylesheets/doc.css.scss

@@ -0,0 +1,15 @@
+@import url("darkmode.css");
+
+body {
+  color:var(--color);
+  background:var(--background-color);
+}
+
+:link {
+  color:var(--link-color);
+}
+
+:visited {
+  color:var(--visited-color);
+}
+

source/stylesheets/site.css.scss

@@ -1,9 +1,11 @@
+@import url("darkmode.css");
+
 body {
-    background-color:white;
-    color:black;
+    color:var(--color);
+    background:var(--background-color);
     font-family:sans-serif;
     margin:0;
-    line-height: 1.2;
+    line-height:1.2;
 }
 
 main {
@@ -18,56 +20,61 @@ header {
 
     li {
       display:inline-block;
-      margin: 0 2em 0 0;
+      margin:0 2em 0 0;
     }
 
    a { text-decoration:none; }
 }
 
-nav ul {
-  padding: 0;
+:link {
+  color:var(--link-color);
+}
+
+:visited {
+  color:var(--visited-color);
 }
 
 nav {
     display:inline;
 
     ul {
       display:inline;
+      padding:0;
     }
 
     li {
       white-space:nowrap;
 
       a[href="/"] {
-          color: black;
+          color:var(--color);
       }
     }
     li:has(a[href="/"]) {
       font-size:50px;
-      margin-left: 0;
+      margin-left:0;
     }
 }
 
 article {
     padding:1em;
 
     h1  {
-      font-size: 2em;
+      font-size:2em;
     }
 }
 
 pre, code, tt {
     font-family:monospace;
 }
 
-pre {
+pre.highlight {
     margin:0 0 0 1em;
-}
-pre code {
-    padding:0.5em;
-    display:inline-block;
-    background: #eee;
-    font-size:small;
+    code {
+      padding:0.5em;
+      display:inline-block;
+      background:var(--highlight-code-background-color);
+      font-size:small;
+    }
 }
 
 .large {
@@ -83,13 +90,17 @@ pre code {
 }
 
 .github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}
+.github-corner svg {
+  color:var(--background-color) !important;
+  fill:var(--color) !important;
+}
 
-@media screen and (max-width: 765px) {
+@media screen and (max-width:765px) {
     header li {
-        margin: 1em 2em 0 0;
+        margin:1em 2em 0 0;
     }
     nav li:has(a[href="/"]) {
-      display: block;
-      margin: 0;
+      display:block;
+      margin:0;
     }
 }