help.html: dark mode

diff --git a/basis/help/html/html.factor b/basis/help/html/html.factor
index dc9c84661f0262066a096fface9622c9c4ee4c62..33a4763a875bcc2e591e82b9875348b10a49aa3d 100644 (file)
--- a/basis/help/html/html.factor
+++ b/basis/help/html/html.factor
@@ -155,10 +155,35 @@ M: pathname url-of
         } prepend
     ] [ drop ] if* ;
 
+: fix-dark-mode ( classes -- classes )
+    { "/* Dark mode */" "@media (prefers-color-scheme:dark) {" }
+    over [
+        R/ {[^}]+}/ [
+            >string R/ #[0-9a-fA-F]+;/ [
+                >string H{
+                    { "#2A5DB0;" "#8ab4f8;" }
+                    { "#333333;" "#cccccc;" }
+                    { "#000000;" "#bdc1c6;" }
+                    { "#2a5db0;" "#8ab4f8;" }
+                    { "#373e48;" "#ffffff;" }
+                    { "#e3e2db;" "#666666;" }
+                    { "#8b4500;" "orange;" }
+                } ?at [
+                    but-last colors:parse-color inverse-color color>hex ";" append
+                ] unless
+            ] re-replace-with
+
+            H{
+                { "white;" "#202124;" }
+                { "black;" "white;" }
+            } [ splitting:replace ] assoc-each
+        ] re-replace-with "    " prepend
+    ] map 3append "}" suffix ;
+
 : css-classes ( classes -- stylesheet )
     [
         [ fix-css-style " { " "}" surround ] [ "." prepend ] bi* prepend
-    ] { } assoc>map fix-help-header join-lines ;
+    ] { } assoc>map fix-help-header fix-dark-mode join-lines ;
 
 :: css-styles-to-classes ( body -- stylesheet body )
     H{ } clone :> classes

diff --git a/basis/help/html/stylesheet.css b/basis/help/html/stylesheet.css
index fa2f2dd78304107f149463c67c1607cd498b3449..832d3a3291f19e82bf9ec8fbf37da61d87534a27 100644 (file)
--- a/basis/help/html/stylesheet.css
+++ b/basis/help/html/stylesheet.css
@@ -94,3 +94,33 @@ tr:hover {
 @media screen and (max-width: 600px) {
 
 }
+
+/* Dark mode */
+@media (prefers-color-scheme: dark) {
+    body {
+        background-color: #202124;
+        color: #bdc1c6;
+    }
+
+    a {
+        color: #8ab4f8;
+    }
+
+    .navbar {
+        background-color: #373e48;
+        border-bottom: 1px solid #666;
+    }
+
+    .footer {
+        border-top: 1px dashed #666;
+        color: #999;
+    }
+
+    input {
+        border: 1px solid #666;
+    }
+
+    tr:hover {
+        background-color: #373e48;
+    }
+}