webapps.wiki: dark mode

diff --git a/extra/webapps/wiki/wiki-contents.css b/extra/webapps/wiki/wiki-contents.css
index 40d20c1d6ea99fcd5d66aeeaccab6cab02938b9d..f0149187f5d72fe7ff7f56136e5c1e06e5b8800a 100644 (file)
--- a/extra/webapps/wiki/wiki-contents.css
+++ b/extra/webapps/wiki/wiki-contents.css
@@ -35,3 +35,16 @@
         display: inline;
     }
 }
+
+
+/* Dark mode */
+@media (prefers-color-scheme: dark) {
+    .navbar img {
+        filter: invert(80%);
+    }
+
+    #left {
+        background-color: #373e48;
+        border-right: 1px solid #666;
+    }
+}

diff --git a/extra/webapps/wiki/wiki-contents.js b/extra/webapps/wiki/wiki-contents.js
index 25fd366a201f7892beddca22170f78871162e1a2..80112a93589f81d6ad84154be82229ea7a4e6c24 100644 (file)
--- a/extra/webapps/wiki/wiki-contents.js
+++ b/extra/webapps/wiki/wiki-contents.js
@@ -3,7 +3,10 @@ function toggleSidebar() {
     var m = document.getElementById("menu");
     if (l.style.display === "") {
         l.style.display = "inline";
-        m.style.backgroundColor = "#f3f2ea";
+        var darkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+        if (!darkMode) {
+            m.style.backgroundColor = "#f3f2ea";
+        }
     } else {
         l.style.display = "";
         m.style.backgroundColor = "";

diff --git a/extra/websites/concatenative/page.css b/extra/websites/concatenative/page.css
index f72be83d35f6713836e9300d1e53a39d802d9ca6..10c44aa09d7b4ceccb2d43990b195b62f82e4826 100644 (file)
--- a/extra/websites/concatenative/page.css
+++ b/extra/websites/concatenative/page.css
@@ -82,3 +82,24 @@ a:hover, .link:hover { text-decoration: underline; }
 .big-field-label {
     vertical-align: top;
 }
+
+/* Dark mode */
+@media (prefers-color-scheme: dark) {
+    body {
+        background-color: #202124;
+        color: #bdc1c6;
+    }
+
+    a, .link {
+        color: #8ab4f8;
+    }
+
+    .page .navbar {
+        border-top: 1px solid #666;
+    }
+
+    .navbar {
+        background-color: #373e48;
+        border-bottom: 1px solid #666;
+    }
+}