1 files changed, 26 insertions, 12 deletions
diff --git a/pkgs/misc/documentation-highlighter/mono-blue.css b/pkgs/misc/documentation-highlighter/mono-blue.css
index bc9bceae4b10..44b546b8d207 100644
--- a/pkgs/misc/documentation-highlighter/mono-blue.css
+++ b/pkgs/misc/documentation-highlighter/mono-blue.css
@@ -1,17 +1,17 @@
 pre code.hljs {
-  display: block;
-  overflow-x: auto;
-  padding: 1em
+    display: block;
+    overflow-x: auto;
+    padding: 1em;
 }
 code.hljs {
-  padding: 3px 5px
+    padding: 3px 5px;
 }
 /*
   Five-color theme from a single blue hue.
 */
 .hljs {
-  background: #eaeef3;
-  color: #00193a
+    background: #eaeef3;
+    color: #00193a;
 }
 .hljs-keyword,
 .hljs-selector-tag,
@@ -20,10 +20,10 @@ code.hljs {
 .hljs-doctag,
 .hljs-name,
 .hljs-strong {
-  font-weight: bold
+    font-weight: bold;
 }
 .hljs-comment {
-  color: #738191
+    color: var(--color-1);
 }
 .hljs-string,
 .hljs-title,
@@ -37,7 +37,7 @@ code.hljs {
 .hljs-name,
 .hljs-selector-id,
 .hljs-selector-class {
-  color: #0048ab
+    color: var(--color-2);
 }
 .hljs-meta,
 .hljs-subst,
@@ -49,8 +49,22 @@ code.hljs {
 .hljs-template-variable,
 .hljs-link,
 .hljs-bullet {
-  color: #4c81c9
+    color: var(--color-3);
 }
 .hljs-emphasis {
-  font-style: italic
-}
-\ No newline at end of file
+    font-style: italic;
+}
+
+:root {
+    --color-1: #738191;
+    --color-2: #0048ab;
+    --color-3: #4c81c9;
+}
+
+@media (prefers-color-scheme: dark) {
+    :root {
+        --color-1: #8b9caf;
+        --color-2: #3b85e7;
+        --color-3: #5795e7;
+    }
+}