From be4f660f042e5bc42f2a5945b8fb5913a000322d Mon Sep 17 00:00:00 2001
From: Alok Singh <alokbeniwal@gmail.com>
Date: Tue, 16 Dec 2025 00:31:58 -0800
Subject: [PATCH 1/2] feat: add dark mode support via prefers-color-scheme

Add automatic dark mode support that respects operating system preferences
using the `@media (prefers-color-scheme: dark)` CSS media query.

Changes:
- verso-vars.css: Add new CSS custom properties for backgrounds, borders,
  links, shadows, and message colors with dark mode variants
- code.css: Update API docs styling to use CSS variables
- search-box.css/search-highlight.css: Update search UI to use CSS variables
- Style.lean: Update manual page styling to use CSS variables

The color scheme is harmonized with lean-lang.org:
- Light: #ffffff background, #333 text, #386ee0 links
- Dark: #1e1e1e background, #eee text, #3b94ff links

Closes #641
---
 src/verso-html/code.css                      |  55 +++++----
 src/verso-manual/VersoManual/Html.lean       |   2 +
 src/verso-manual/VersoManual/Html/Style.lean |  78 +++++++++---
 src/verso/Verso/Code/Highlighted.lean        |  80 ++++++------
 static-web/search/search-box.css             |  22 ++--
 static-web/search/search-highlight.css       |  16 +--
 static-web/theme-toggle.js                   | 123 +++++++++++++++++++
 static-web/verso-vars.css                    | 108 +++++++++++++++-
 8 files changed, 379 insertions(+), 105 deletions(-)
 create mode 100644 static-web/theme-toggle.js

diff --git a/src/verso-html/code.css b/src/verso-html/code.css
index 625d4e55..ae3b022a 100644
--- a/src/verso-html/code.css
+++ b/src/verso-html/code.css
@@ -15,7 +15,8 @@
 body {
     font-family: var(--verso-text-font-family);
     line-height: 1.6;
-    color: #333;
+    color: var(--verso-text-color, #333);
+    background-color: var(--verso-background-color, #fff);
     height: 100vh;
     overflow: hidden;
 }
@@ -29,8 +30,8 @@ body {
 /* Sidebar */
 .sidebar {
     width: 300px;
-    background: #f8f9fa;
-    border-right: 1px solid #e9ecef;
+    background: var(--verso-surface-color, #f8f9fa);
+    border-right: 1px solid var(--verso-border-color, #e9ecef);
     overflow-y: auto;
     flex-shrink: 0;
 }
@@ -73,11 +74,11 @@ body {
 }
 
 .module-tree summary:hover {
-    background-color: #e9ecef;
+    background-color: var(--verso-border-color, #e9ecef);
 }
 
 .module-tree summary a {
-    color: #0066cc;
+    color: var(--verso-link-color, #0066cc);
     text-decoration: none;
 }
 
@@ -86,12 +87,12 @@ body {
 }
 
 .module-tree summary.current {
-    background-color: #0066cc;
-    color: white;
+    background-color: var(--verso-link-color, #0066cc);
+    color: var(--verso-background-color, white);
 }
 
 .module-tree summary.current a {
-    color: white;
+    color: var(--verso-background-color, white);
 }
 
 .module-tree summary::before {
@@ -100,7 +101,7 @@ body {
     left: -0.75rem;
     transition: transform 0.2s ease;
     font-size: 0.75rem;
-    color: #6c757d;
+    color: var(--verso-text-color-light, #6c757d);
 }
 
 .module-tree details[open] > summary::before {
@@ -114,7 +115,7 @@ body {
 }
 
 .module-tree .leaf a {
-    color: #0066cc;
+    color: var(--verso-link-color, #0066cc);
     text-decoration: none;
 }
 
@@ -123,12 +124,12 @@ body {
 }
 
 .module-tree .current {
-    background-color: #0066cc;
-    color: white;
+    background-color: var(--verso-link-color, #0066cc);
+    color: var(--verso-background-color, white);
 }
 
 .module-tree .current a {
-    color: white;
+    color: var(--verso-background-color, white);
 }
 
 /* Main content area */
@@ -141,8 +142,8 @@ body {
 
 /* Title bar */
 .title-bar {
-    background: #fff;
-    border-bottom: 1px solid #e9ecef;
+    background: var(--verso-background-color, #fff);
+    border-bottom: 1px solid var(--verso-border-color, #e9ecef);
     padding: 1rem 1.5rem;
     flex-shrink: 0;
     position: relative;
@@ -165,12 +166,12 @@ body {
 .breadcrumbs li:not(:last-child)::after {
     content: "·";
     margin: 0;
-    color: #6c757d;
+    color: var(--verso-text-color-light, #6c757d);
     font-weight: bold;
 }
 
 .breadcrumbs a {
-    color: #0066cc;
+    color: var(--verso-link-color, #0066cc);
     text-decoration: none;
     padding: 0.25rem 0.5rem;
     border-radius: 0.25rem;
@@ -178,13 +179,13 @@ body {
 }
 
 .breadcrumbs a:hover {
-    background-color: #e3f2fd;
+    background-color: var(--verso-selected-color, #e3f2fd);
     text-decoration: underline;
 }
 
 .breadcrumbs .current {
     font-weight: 600;
-    color: #495057;
+    color: var(--verso-text-color, #495057);
     padding: 0.25rem 0.5rem;
     border-radius: 0.25rem;
 }
@@ -194,8 +195,8 @@ body {
     flex: 1;
     overflow-y: auto;
     padding: 2rem;
-    background: #ffffff;
-    color: #24292e;
+    background: var(--verso-background-color, #ffffff);
+    color: var(--verso-text-color, #24292e);
     font-family: "Monaco", "Menlo", "Ubuntu Mono", monospace;
     font-size: 1rem;
 }
@@ -206,7 +207,7 @@ body {
     margin-left: calc(var(--indent, 0) * 1ch);
     padding: 0.25rem 0.5rem;
     max-width: 40em;
-    border: 1px solid #ddd;
+    border: 1px solid var(--verso-border-color-light, #ddd);
     border-radius: 1rem;
     width: max-content;
 }
@@ -297,19 +298,19 @@ pre,
     top: 1rem;
     left: 1rem;
     z-index: 1001;
-    background: #fff;
-    border: 1px solid #dee2e6;
+    background: var(--verso-background-color, #fff);
+    border: 1px solid var(--verso-border-color, #dee2e6);
     border-radius: 0.375rem;
     padding: 0.5rem;
     cursor: pointer;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    box-shadow: 0 2px 4px var(--verso-shadow-color, rgba(0, 0, 0, 0.1));
 }
 
 .hamburger span {
     display: block;
     width: 20px;
     height: 2px;
-    background: #333;
+    background: var(--verso-text-color, #333);
     margin: 4px 0;
     transition: 0.3s;
 }
@@ -327,7 +328,7 @@ pre,
         height: 100vh;
         z-index: 1000;
         transition: left 0.3s ease;
-        box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
+        box-shadow: 2px 0 10px var(--verso-shadow-color, rgba(0, 0, 0, 0.1));
     }
 
     .menu-toggle:checked + .hamburger + .layout .sidebar {
diff --git a/src/verso-manual/VersoManual/Html.lean b/src/verso-manual/VersoManual/Html.lean
index 68be6e59..da79fba0 100644
--- a/src/verso-manual/VersoManual/Html.lean
+++ b/src/verso-manual/VersoManual/Html.lean
@@ -444,6 +444,7 @@ public def page
         <link rel="stylesheet" href="-verso-search/search-box.css"/>
         <link rel="stylesheet" href="-verso-search/search-highlight.css"/>
         <link rel="stylesheet" href="-verso-search/domain-display.css"/>
+        <script src="theme-toggle.js"></script>
         {{extraJsFiles.map fun f => ({{<script src=s!"{f.1}" {{if f.2 then defer else #[]}}></script>}})}}
         {{extraStylesheets.map (fun url => {{<link rel="stylesheet" href={{url}}/> }})}}
         {{extraCss.toArray.map ({{<style>{{Html.text false ·.css}}</style>}})}}
@@ -465,6 +466,7 @@ public def page
           <div class="header-title-wrapper">
             <a href={{if let some dest := logoLink then dest else "/"}} class="header-title"><h1>{{bookTitle}}</h1></a>
           </div>
+          <button id="theme-toggle" type="button" aria-label="Toggle dark mode"></button>
         </header>
         <label for="toggle-toc" id="toggle-toc-click">
           <span class="line line1"/>
diff --git a/src/verso-manual/VersoManual/Html/Style.lean b/src/verso-manual/VersoManual/Html/Style.lean
index 9338eac0..8cb3bb77 100644
--- a/src/verso-manual/VersoManual/Html/Style.lean
+++ b/src/verso-manual/VersoManual/Html/Style.lean
@@ -24,7 +24,7 @@ public def pageStyle : String := r####"
     --verso-logo-height: var(--verso-header-height);
 
     /** Table of Contents appearance **/
-    --verso-toc-background-color: #fafafa;
+    --verso-toc-background-color: var(--verso-surface-color, #fafafa);
     --verso-toc-text-color: var(--verso-text-color);
 
     /* How long should the ToC animation take? */
@@ -33,15 +33,15 @@ public def pageStyle : String := r####"
     /* How wide should the ToC be on non-mobile? */
     --verso-toc-width: 18rem;
 
-    /** Variables that control the “burger menu” appearance **/
+    /** Variables that control the "burger menu" appearance **/
     --verso-burger-height: 1.25rem;
     --verso-burger-width: 1.25rem;
     --verso-burger-line-width: 0.2rem;
     --verso-burger-line-radius: 0.2rem;
     --verso-burger-toc-visible-color: var(--verso-toc-text-color);
-    --verso-burger-toc-visible-shadow-color: #ffffff;
-    --verso-burger-toc-hidden-color: #0e2431;
-    --verso-burger-toc-hidden-shadow-color: #ffffff;
+    --verso-burger-toc-visible-shadow-color: var(--verso-background-color, #ffffff);
+    --verso-burger-toc-hidden-color: var(--verso-text-color, #0e2431);
+    --verso-burger-toc-hidden-shadow-color: var(--verso-background-color, #ffffff);
 
     /* The "burger menu" may need to get bigger for mobile screens */
     --verso-mobile-burger-height: 1.5rem;
@@ -85,6 +85,8 @@ html {
 body {
     margin: 0;
     padding: 0;
+    background-color: var(--verso-background-color, #ffffff);
+    color: var(--verso-text-color, #333333);
 }
 
 /******** Theme ********/
@@ -94,6 +96,7 @@ h1, h2, h3, h4, h5, h6 {
     font-weight: bold;
     text-rendering: optimizeLegibility;
     margin-top: 1.5rem;
+    color: var(--verso-structure-color, inherit);
 }
 
 p, dt, dd {
@@ -116,6 +119,14 @@ pre, code {
     overflow-y: clip;
 }
 
+a {
+    color: var(--verso-link-color, #386ee0);
+}
+
+a:hover {
+    color: var(--verso-link-hover-color, #0073e6);
+}
+
 /******** Page Layout ********/
 
 header {
@@ -124,11 +135,11 @@ header {
 	z-index: 99;
 	left: 0;
 	right: 0;
-	background: white;
+	background: var(--verso-background-color, white);
 	display: flex;
 	align-items: center;
 	height: var(--verso-header-height);
-	box-shadow: 0 0px 6px lightgray;
+	box-shadow: 0 0px 6px var(--verso-shadow-color, lightgray);
 }
 
 .header-logo-wrapper {
@@ -151,6 +162,35 @@ header {
     flex: 1;
 }
 
+/* Theme toggle button */
+#theme-toggle {
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    font-size: 1.25rem;
+    padding: 0.5rem;
+    margin-right: 0.5rem;
+    border-radius: 0.25rem;
+    line-height: 1;
+    transition: background-color 0.2s ease;
+}
+
+#theme-toggle:hover {
+    background-color: var(--verso-hover-highlight-color, #eeeeee);
+}
+
+#theme-toggle:focus {
+    outline: 2px solid var(--verso-link-color, #386ee0);
+    outline-offset: 2px;
+}
+
+@media screen and (max-width: 700px) {
+    #theme-toggle {
+        margin-right: 0.25rem;
+        padding: 0.25rem;
+    }
+}
+
 @media screen and (max-width: 1500px) {
     /* Add the padding of the content when the content moves to the left */
     padding-left: var(--verso--content-padding-x);
@@ -158,7 +198,7 @@ header {
 
 .header-title {
     text-decoration: none;
-    color: black;
+    color: var(--verso-text-color, black);
     font-size: 2rem;
     font-weight: bold;
     display: block;
@@ -240,7 +280,7 @@ main [id] {
     body:has(#toggle-toc:checked) .toc-backdrop {
         position: fixed;
         inset: 0;
-        background-color: #aaa8;
+        background-color: rgba(0, 0, 0, 0.5);
         z-index: 9;
     }
     html:has(#toggle-toc:checked) {
@@ -275,13 +315,13 @@ main [id] {
 }
 
 #toc a {
-    color: #333;
+    color: var(--verso-text-color, #333);
     text-decoration: none;
 }
 
 #toc a:hover {
     text-decoration: underline;
-    color: #000;
+    color: var(--verso-link-hover-color, #000);
 }
 
 .toc-title {
@@ -345,7 +385,7 @@ main [id] {
     width: calc(var(--verso-toc-triangle-width) + var(--verso-toc-triangle-left-space));
     height: var(--verso-toc-triangle-height);
     display: inline-block;
-    background-color: black;
+    background-color: var(--verso-text-color, black);
     content: ' ';
     transition: ease 0.2s;
     margin-right: var(--verso-toc-triangle-margin);
@@ -386,7 +426,7 @@ main [id] {
 }
 
 #toc .split-toc table {
-    border-left: 1px dotted;
+    border-left: 1px dotted var(--verso-border-color, currentColor);
     padding-left: 1.2rem;
     padding-top: 0.2rem;
 }
@@ -396,7 +436,7 @@ main [id] {
 }
 
 #toc .split-toc > ol {
-    border-left: 1px dotted;
+    border-left: 1px dotted var(--verso-border-color, currentColor);
     list-style-type: none;
     padding-left: 0.5rem;
     margin-left: 0;
@@ -443,7 +483,7 @@ main [id] {
     flex: 1;
     justify-content: center;
     align-items: center;
-    color: black;
+    color: var(--verso-text-color, black);
     text-decoration: none;
 }
 
@@ -798,7 +838,7 @@ main .section-toc a:hover {
 .permalink-widget > a {
   /* Don't show the colors here */
   color: transparent;
-  text-shadow: 0 0 0 gray;
+  text-shadow: 0 0 0 var(--verso-text-color-light, gray);
   text-decoration: none;
 }
 
@@ -881,18 +921,18 @@ main section li ol {
     overflow-x: auto;
     margin: 0px;
     margin: 0.5em .85em;
-    border-left: 0.2em solid red;
+    border-left: 0.2em solid var(--verso-error-indicator-color, red);
     padding: 0 0.45em;
 }
 
 /* Different color for warning */
 .lean-output.warning {
-    border-color: var(--verso-warning-color);
+    border-color: var(--verso-warning-indicator-color);
 }
 
 /* Different color for information */
 .lean-output.information {
-    border-color: #0000c0;
+    border-color: var(--verso-info-indicator-color, #0000c0);
 }
 
 
diff --git a/src/verso/Verso/Code/Highlighted.lean b/src/verso/Verso/Code/Highlighted.lean
index 9dd9590f..42782094 100644
--- a/src/verso/Verso/Code/Highlighted.lean
+++ b/src/verso/Verso/Code/Highlighted.lean
@@ -682,8 +682,8 @@ public def highlightingStyle : String := "
 .hl.lean .token .hover-info {
   display: none;
   position: absolute;
-  background-color: #e5e5e5;
-  border: 1px solid black;
+  background-color: var(--verso-hover-background-color, #e5e5e5);
+  border: 1px solid var(--verso-border-color, black);
   padding: 0.5rem;
   z-index: 300;
 }
@@ -700,7 +700,7 @@ public def highlightingStyle : String := "
 .hl.lean .hover-info code {
   white-space: pre-wrap;
   background: none;
-  color: black;
+  color: var(--verso-text-color, black);
 }
 
 .hl.lean .hover-info.messages > code {
@@ -742,7 +742,7 @@ public def highlightingStyle : String := "
 
 @media (hover: hover) {
   .hl.lean .token.binding-hl, .hl.lean .literal.string:hover, .hl.lean .token.typed:hover {
-    background-color: #eee;
+    background-color: var(--verso-hover-highlight-color, #eee);
     border-radius: 2px;
     transition: none;
   }
@@ -760,7 +760,7 @@ public def highlightingStyle : String := "
   display: none;
   position: absolute;
   transform: translate(0.25rem, 0.3rem);
-  border: 1px solid black;
+  border: 1px solid var(--verso-border-color, black);
   padding: 0.5rem;
   z-index: 400;
   text-align: left;
@@ -772,13 +772,13 @@ public def highlightingStyle : String := "
 
 @media (hover: hover) {
   .hl.lean .has-info.error:hover {
-    background-color: #ffb3b3;
+    background-color: var(--verso-error-hover-color, #ffb3b3);
   }
 }
 
 .hl.lean .hover-info.messages > code.error {
-  background-color: #e5e5e5;
-  border-left: 0.2rem solid #ffb3b3;
+  background-color: var(--verso-hover-background-color, #e5e5e5);
+  border-left: 0.2rem solid var(--verso-error-hover-color, #ffb3b3);
 }
 
 .tippy-box[data-theme~='error'] .hl.lean .hover-info.messages > code.error {
@@ -844,14 +844,14 @@ public def highlightingStyle : String := "
 
 @media (hover: hover) {
   .hl.lean .has-info.information:hover {
-    background-color: #4777ff;
+    background-color: var(--verso-info-hover-color, #4777ff);
   }
 }
 
 
 .hl.lean .hover-info.messages > code.information {
-  background-color: #e5e5e5;
-  border-left: 0.2rem solid #4777ff;
+  background-color: var(--verso-hover-background-color, #e5e5e5);
+  border-left: 0.2rem solid var(--verso-info-indicator-color, #4777ff);
 }
 
 .tippy-box[data-theme~='info'] .hl.lean .hover-info.messages > code.information {
@@ -883,7 +883,7 @@ public def highlightingStyle : String := "
   margin-bottom: 0.5rem;
   padding: 0;
   height: 1px;
-  border-top: 1px solid #ccc;
+  border-top: 1px solid var(--verso-border-color-light, #ccc);
 }
 
 .hl.lean code {
@@ -894,11 +894,11 @@ public def highlightingStyle : String := "
   display: none;
   position: relative;
   width: fit-content;
-  border: 1px solid #888888;
+  border: 1px solid var(--verso-border-color, #888888);
   border-radius: 0.1rem;
   padding: 0.5rem;
   font-family: sans-serif;
-  background-color: #ffffff;
+  background-color: var(--verso-background-color, #ffffff);
 }
 
 .hl.lean.popup .tactic-state {
@@ -1145,25 +1145,25 @@ Some CSS frameworks customize details/summary in ways not compatible with Verso'
 }
 
 .tippy-box[data-theme~='lean'] {
-  background-color: #e5e5e5;
-  color: black;
-  border: 1px solid black;
+  background-color: var(--verso-hover-background-color, #e5e5e5);
+  color: var(--verso-text-color, black);
+  border: 1px solid var(--verso-border-color, black);
 }
 .tippy-box[data-theme~='lean'][data-placement^='top'] > .tippy-arrow::before {
-  border-top-color: #e5e5e5;
+  border-top-color: var(--verso-hover-background-color, #e5e5e5);
 }
 .tippy-box[data-theme~='lean'][data-placement^='bottom'] > .tippy-arrow::before {
-  border-bottom-color: #e5e5e5;
+  border-bottom-color: var(--verso-hover-background-color, #e5e5e5);
 }
 .tippy-box[data-theme~='lean'][data-placement^='left'] > .tippy-arrow::before {
-  border-left-color: #e5e5e5;
+  border-left-color: var(--verso-hover-background-color, #e5e5e5);
 }
 .tippy-box[data-theme~='lean'][data-placement^='right'] > .tippy-arrow::before {
-  border-right-color: #e5e5e5;
+  border-right-color: var(--verso-hover-background-color, #e5e5e5);
 }
 
 .tippy-box[data-theme~='message'][data-placement^='top'] > .tippy-arrow::before {
-  border-top-color: #e5e5e5;
+  border-top-color: var(--verso-hover-background-color, #e5e5e5);
   border-width: 11px 11px 0;
 }
 .tippy-box[data-theme~='message'][data-placement^='top'] > .tippy-arrow::after {
@@ -1178,7 +1178,7 @@ Some CSS frameworks customize details/summary in ways not compatible with Verso'
   border-width: 0 11px 11px;
 }
 .tippy-box[data-theme~='message'][data-placement^='left'] > .tippy-arrow::before {
-  border-left-color: #e5e5e5;
+  border-left-color: var(--verso-hover-background-color, #e5e5e5);
   border-width: 11px 0 11px 11px;
 }
 .tippy-box[data-theme~='message'][data-placement^='left'] > .tippy-arrow::after {
@@ -1187,7 +1187,7 @@ Some CSS frameworks customize details/summary in ways not compatible with Verso'
 }
 
 .tippy-box[data-theme~='message'][data-placement^='right'] > .tippy-arrow::before {
-  border-right-color: #e5e5e5;
+  border-right-color: var(--verso-hover-background-color, #e5e5e5);
   border-width: 11px 11px 11px 0;
 }
 .tippy-box[data-theme~='message'][data-placement^='right'] > .tippy-arrow::after {
@@ -1198,39 +1198,39 @@ Some CSS frameworks customize details/summary in ways not compatible with Verso'
 
 
 .tippy-box[data-theme~='warning'] {
-  background-color: #e5e5e5;
-  color: black;
-  border: 3px solid var(--verso-warning-color);
+  background-color: var(--verso-hover-background-color, #e5e5e5);
+  color: var(--verso-text-color, black);
+  border: 3px solid var(--verso-warning-indicator-color);
 }
 
 .tippy-box[data-theme~='error'] {
-  background-color: #e5e5e5;
-  color: black;
-  border: 3px solid #f7a7af;
+  background-color: var(--verso-hover-background-color, #e5e5e5);
+  color: var(--verso-text-color, black);
+  border: 3px solid var(--verso-error-hover-color, #f7a7af);
 }
 
 .tippy-box[data-theme~='info'] {
-  background-color: #e5e5e5;
-  color: black;
-  border: 3px solid #99b3c2;
+  background-color: var(--verso-hover-background-color, #e5e5e5);
+  color: var(--verso-text-color, black);
+  border: 3px solid var(--verso-info-indicator-color, #99b3c2);
 }
 
 .tippy-box[data-theme~='tactic'] {
-  background-color: white;
-  color: black;
-  border: 1px solid black;
+  background-color: var(--verso-background-color, white);
+  color: var(--verso-text-color, black);
+  border: 1px solid var(--verso-border-color, black);
 }
 .tippy-box[data-theme~='tactic'][data-placement^='top'] > .tippy-arrow::before {
-  border-top-color: white;
+  border-top-color: var(--verso-background-color, white);
 }
 .tippy-box[data-theme~='tactic'][data-placement^='bottom'] > .tippy-arrow::before {
-  border-bottom-color: white;
+  border-bottom-color: var(--verso-background-color, white);
 }
 .tippy-box[data-theme~='tactic'][data-placement^='left'] > .tippy-arrow::before {
-  border-left-color: white;
+  border-left-color: var(--verso-background-color, white);
 }
 .tippy-box[data-theme~='tactic'][data-placement^='right'] > .tippy-arrow::before {
-  border-right-color: white;
+  border-right-color: var(--verso-background-color, white);
 }
 
 .extra-doc-links {
diff --git a/static-web/search/search-box.css b/static-web/search/search-box.css
index 4606b801..61891aea 100644
--- a/static-web/search/search-box.css
+++ b/static-web/search/search-box.css
@@ -30,14 +30,14 @@
 }
 
 #search-wrapper .combobox .cb_edit {
-    background-color: white;
-    color: black;
+    background-color: var(--verso-background-color, white);
+    color: var(--verso-text-color, black);
     box-sizing: border-box;
     padding: 0;
     margin: 0;
     vertical-align: bottom;
     border: none;
-    border-bottom: 1px solid gray;
+    border-bottom: 1px solid var(--verso-border-color, gray);
     position: relative;
     cursor: pointer;
     width: var(--search-bar-width);
@@ -60,7 +60,7 @@
 #search-wrapper .cb_edit:empty:before {
     content: attr(placeholder);
     pointer-events: none;
-    color: #888;
+    color: var(--verso-text-color-light, #888);
     font-family: sans-serif;
     display: block;
 }
@@ -72,10 +72,10 @@
     top: calc(100%);
     width: var(--search-bar-width);
     list-style: none;
-    background-color: white;
+    background-color: var(--verso-background-color, white);
     display: none;
     box-sizing: border-box;
-    border: 2px currentcolor solid;
+    border: 2px solid var(--verso-border-color, currentcolor);
     max-height: 20rem;
     overflow: scroll;
     overflow-x: hidden;
@@ -129,8 +129,8 @@
     background-color: var(--selected-color);
     padding-bottom: calc(0.2rem - 1px);
     padding-top: calc(0.2rem - 1px);
-    border-bottom: 1px solid currentColor;
-    border-top: 1px solid currentColor;
+    border-bottom: 1px solid var(--verso-border-color, currentColor);
+    border-top: 1px solid var(--verso-border-color, currentColor);
 }
 
 /* Couple the domain tighter with the search term on smaller screens,
@@ -161,7 +161,7 @@
 
 #search-wrapper .search-result .domain {
     text-align: right;
-    color: #777;
+    color: var(--verso-text-color-light, #777);
     font-style: italic;
     font-family: var(--verso-structure-font-family);
     font-weight: normal;
@@ -195,7 +195,7 @@
 
 #search-wrapper .more-results {
     text-align: center;
-    color: #777;
+    color: var(--verso-text-color-light, #777);
     font-size: 0.7rem;
 }
 
@@ -221,5 +221,5 @@
     flex-direction: column;
     justify-content: center;
     align-items: center;
-    background-color: white;
+    background-color: var(--verso-background-color, white);
 }
diff --git a/static-web/search/search-highlight.css b/static-web/search/search-highlight.css
index 24913c13..e47fe3b9 100644
--- a/static-web/search/search-highlight.css
+++ b/static-web/search/search-highlight.css
@@ -13,11 +13,11 @@
     z-index: 99; /* The search box dropdown is 100, and should cover this */
     display: flex;
     gap: 4px;
-    background: white;
-    border: 1px solid #ccc;
+    background: var(--verso-background-color, white);
+    border: 1px solid var(--verso-border-color, #ccc);
     border-radius: 4px;
     padding: 4px;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    box-shadow: 0 2px 4px var(--verso-shadow-color, rgba(0, 0, 0, 0.1));
     box-sizing: border-box;
     font-size: 0.9rem;
     font-family: system-ui, sans-serif;
@@ -42,8 +42,9 @@
     padding: 6px 8px;
     border-radius: 2px;
     cursor: pointer;
-    background: #f8f9fa;
-    border: 1px solid #ddd;
+    background: var(--verso-surface-color, #f8f9fa);
+    border: 1px solid var(--verso-border-color-light, #ddd);
+    color: var(--verso-text-color, inherit);
 }
 
 @media screen and (max-width: 700px) {
@@ -62,12 +63,13 @@
 
 #highlight-current-count {
     padding: 6px 8px;
-    background: #f8f9fa;
-    border: 1px solid #ddd;
+    background: var(--verso-surface-color, #f8f9fa);
+    border: 1px solid var(--verso-border-color-light, #ddd);
     border-radius: 2px;
     min-width: 40px;
     text-align: center;
     flex: 1 1 100%;
+    color: var(--verso-text-color, inherit);
 }
 
 #highlight-current-count:has(#highlight-current:not(:empty)) {
diff --git a/static-web/theme-toggle.js b/static-web/theme-toggle.js
new file mode 100644
index 00000000..f86aa364
--- /dev/null
+++ b/static-web/theme-toggle.js
@@ -0,0 +1,123 @@
+// Theme toggle functionality with localStorage persistence
+(function() {
+    'use strict';
+
+    const STORAGE_KEY = 'verso-theme';
+
+    // Get the system preference
+    function getSystemTheme() {
+        return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+    }
+
+    // Get the stored preference, or null if none
+    function getStoredTheme() {
+        try {
+            return localStorage.getItem(STORAGE_KEY);
+        } catch {
+            return null;
+        }
+    }
+
+    // Set the theme on the document
+    function setTheme(theme) {
+        if (theme === 'system') {
+            document.documentElement.removeAttribute('data-theme');
+        } else {
+            document.documentElement.setAttribute('data-theme', theme);
+        }
+        updateToggleIcon();
+    }
+
+    // Store the preference
+    function storeTheme(theme) {
+        try {
+            if (theme === 'system') {
+                localStorage.removeItem(STORAGE_KEY);
+            } else {
+                localStorage.setItem(STORAGE_KEY, theme);
+            }
+        } catch {
+            // localStorage might be unavailable
+        }
+    }
+
+    // Get the effective (displayed) theme
+    function getEffectiveTheme() {
+        const stored = getStoredTheme();
+        if (stored === 'dark' || stored === 'light') {
+            return stored;
+        }
+        return getSystemTheme();
+    }
+
+    // Update the toggle button icon
+    function updateToggleIcon() {
+        const toggle = document.getElementById('theme-toggle');
+        if (!toggle) return;
+
+        const effective = getEffectiveTheme();
+        // Show sun when dark (click to go light), moon when light (click to go dark)
+        toggle.setAttribute('aria-label', effective === 'dark' ? 'Switch to light mode' : 'Switch to dark mode');
+        toggle.innerHTML = effective === 'dark' ? '☀️' : '🌙';
+    }
+
+    // Cycle through: system -> dark -> light -> system
+    function cycleTheme() {
+        const stored = getStoredTheme();
+        let newTheme;
+
+        if (stored === null) {
+            // Currently system preference - go to opposite of system
+            newTheme = getSystemTheme() === 'dark' ? 'light' : 'dark';
+        } else if (stored === 'dark') {
+            newTheme = 'light';
+        } else {
+            newTheme = 'system';
+        }
+
+        storeTheme(newTheme);
+        setTheme(newTheme);
+    }
+
+    // Initialize theme on page load
+    function initTheme() {
+        const stored = getStoredTheme();
+        if (stored === 'dark' || stored === 'light') {
+            setTheme(stored);
+        }
+        // If system preference, don't set data-theme (CSS handles it)
+    }
+
+    // Set up the toggle button click handler
+    function initToggle() {
+        const toggle = document.getElementById('theme-toggle');
+        if (toggle) {
+            toggle.addEventListener('click', cycleTheme);
+            updateToggleIcon();
+        }
+    }
+
+    // Listen for system theme changes
+    function watchSystemTheme() {
+        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+            // Only update icon if using system preference
+            if (!getStoredTheme()) {
+                updateToggleIcon();
+            }
+        });
+    }
+
+    // Initialize immediately (before DOMContentLoaded) for theme to avoid flash
+    initTheme();
+
+    // Set up toggle and system watcher when DOM is ready
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', () => {
+            initToggle();
+            watchSystemTheme();
+        });
+    } else {
+        initToggle();
+        watchSystemTheme();
+    }
+})();
diff --git a/static-web/verso-vars.css b/static-web/verso-vars.css
index f640503d..0db9c6f5 100644
--- a/static-web/verso-vars.css
+++ b/static-web/verso-vars.css
@@ -7,14 +7,36 @@
     /* The font family used for code */
     --verso-code-font-family: monospace;
 
+    /** Background colors **/
+    --verso-background-color: #ffffff;
+    --verso-surface-color: #f9fbfd;
+
     /** Text colors **/
-    --verso-text-color: black;
+    --verso-text-color: #333333;
+    --verso-text-color-light: #64748b;
     --verso-code-color: black;
     --verso-structure-color: black;
 
+    /** Link colors **/
+    --verso-link-color: #386ee0;
+    --verso-link-hover-color: #0073e6;
+
+    /** Border colors **/
+    --verso-border-color: #e4ebf3;
+    --verso-border-color-light: #d1d9e2;
+
     /** Selected items (e.g. search results) */
     --verso-selected-color: #def;
 
+    /** Shadow colors **/
+    --verso-shadow-color: rgba(35, 55, 139, 0.1);
+
+    /** Hover/tooltip colors **/
+    --verso-hover-background-color: #e5e5e5;
+    --verso-hover-highlight-color: #eeeeee;
+    --verso-error-hover-color: #ffb3b3;
+    --verso-info-hover-color: #b3d4ff;
+
     /** Message colors **/
     /*
     These colors are used to render Lean's feedback. They come in three severities and two
@@ -52,3 +74,87 @@
     --verso-code-var-style: italic;
     --verso-code-kw-font-family: var(--verso-code-font-family);
 }
+
+/** Dark mode - respects OS preference **/
+@media (prefers-color-scheme: dark) {
+    :root:not([data-theme="light"]) {
+        /** Background colors **/
+        --verso-background-color: #1e1e1e;
+        --verso-surface-color: #181818;
+
+        /** Text colors **/
+        --verso-text-color: #eeeeee;
+        --verso-text-color-light: #bbbbbb;
+        --verso-code-color: #eeeeee;
+        --verso-structure-color: #eeeeee;
+
+        /** Link colors **/
+        --verso-link-color: #3b94ff;
+        --verso-link-hover-color: #4d9efc;
+
+        /** Border colors **/
+        --verso-border-color: #333333;
+        --verso-border-color-light: #444444;
+
+        /** Selected items (e.g. search results) */
+        --verso-selected-color: #2a4a6a;
+
+        /** Shadow colors **/
+        --verso-shadow-color: rgba(0, 0, 0, 0.5);
+
+        /** Hover/tooltip colors **/
+        --verso-hover-background-color: #3a3a3a;
+        --verso-hover-highlight-color: #444444;
+        --verso-error-hover-color: #5c2a2a;
+        --verso-info-hover-color: #2a3d5c;
+
+        /** Message colors **/
+        --verso-info-color: #eeeeee;
+        --verso-info-indicator-color: #4777ff;
+        --verso-warning-color: #eeeeee;
+        --verso-warning-indicator-color: #e7a71d;
+        --verso-error-color: #ff6666;
+        --verso-error-indicator-color: #ff4444;
+    }
+}
+
+/** Manual dark mode override **/
+:root[data-theme="dark"] {
+    /** Background colors **/
+    --verso-background-color: #1e1e1e;
+    --verso-surface-color: #181818;
+
+    /** Text colors **/
+    --verso-text-color: #eeeeee;
+    --verso-text-color-light: #bbbbbb;
+    --verso-code-color: #eeeeee;
+    --verso-structure-color: #eeeeee;
+
+    /** Link colors **/
+    --verso-link-color: #3b94ff;
+    --verso-link-hover-color: #4d9efc;
+
+    /** Border colors **/
+    --verso-border-color: #333333;
+    --verso-border-color-light: #444444;
+
+    /** Selected items (e.g. search results) */
+    --verso-selected-color: #2a4a6a;
+
+    /** Shadow colors **/
+    --verso-shadow-color: rgba(0, 0, 0, 0.5);
+
+    /** Hover/tooltip colors **/
+    --verso-hover-background-color: #3a3a3a;
+    --verso-hover-highlight-color: #444444;
+    --verso-error-hover-color: #5c2a2a;
+    --verso-info-hover-color: #2a3d5c;
+
+    /** Message colors **/
+    --verso-info-color: #eeeeee;
+    --verso-info-indicator-color: #4777ff;
+    --verso-warning-color: #eeeeee;
+    --verso-warning-indicator-color: #e7a71d;
+    --verso-error-color: #ff6666;
+    --verso-error-indicator-color: #ff4444;
+}

From ba2c0ea1f7dd753683ccb04e1b3b1ee851f000d3 Mon Sep 17 00:00:00 2001
From: Alok Singh <alokbeniwal@gmail.com>
Date: Wed, 17 Dec 2025 03:43:39 -0800
Subject: [PATCH 2/2] style: apply prettier formatting to theme-toggle.js

---
 static-web/theme-toggle.js | 47 ++++++++++++++++++++------------------
 1 file changed, 25 insertions(+), 22 deletions(-)

diff --git a/static-web/theme-toggle.js b/static-web/theme-toggle.js
index f86aa364..999a7b0e 100644
--- a/static-web/theme-toggle.js
+++ b/static-web/theme-toggle.js
@@ -1,12 +1,12 @@
 // Theme toggle functionality with localStorage persistence
-(function() {
-    'use strict';
+(function () {
+    "use strict";
 
-    const STORAGE_KEY = 'verso-theme';
+    const STORAGE_KEY = "verso-theme";
 
     // Get the system preference
     function getSystemTheme() {
-        return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+        return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
     }
 
     // Get the stored preference, or null if none
@@ -20,10 +20,10 @@
 
     // Set the theme on the document
     function setTheme(theme) {
-        if (theme === 'system') {
-            document.documentElement.removeAttribute('data-theme');
+        if (theme === "system") {
+            document.documentElement.removeAttribute("data-theme");
         } else {
-            document.documentElement.setAttribute('data-theme', theme);
+            document.documentElement.setAttribute("data-theme", theme);
         }
         updateToggleIcon();
     }
@@ -31,7 +31,7 @@
     // Store the preference
     function storeTheme(theme) {
         try {
-            if (theme === 'system') {
+            if (theme === "system") {
                 localStorage.removeItem(STORAGE_KEY);
             } else {
                 localStorage.setItem(STORAGE_KEY, theme);
@@ -44,7 +44,7 @@
     // Get the effective (displayed) theme
     function getEffectiveTheme() {
         const stored = getStoredTheme();
-        if (stored === 'dark' || stored === 'light') {
+        if (stored === "dark" || stored === "light") {
             return stored;
         }
         return getSystemTheme();
@@ -52,13 +52,16 @@
 
     // Update the toggle button icon
     function updateToggleIcon() {
-        const toggle = document.getElementById('theme-toggle');
+        const toggle = document.getElementById("theme-toggle");
         if (!toggle) return;
 
         const effective = getEffectiveTheme();
         // Show sun when dark (click to go light), moon when light (click to go dark)
-        toggle.setAttribute('aria-label', effective === 'dark' ? 'Switch to light mode' : 'Switch to dark mode');
-        toggle.innerHTML = effective === 'dark' ? '☀️' : '🌙';
+        toggle.setAttribute(
+            "aria-label",
+            effective === "dark" ? "Switch to light mode" : "Switch to dark mode",
+        );
+        toggle.innerHTML = effective === "dark" ? "☀️" : "🌙";
     }
 
     // Cycle through: system -> dark -> light -> system
@@ -68,11 +71,11 @@
 
         if (stored === null) {
             // Currently system preference - go to opposite of system
-            newTheme = getSystemTheme() === 'dark' ? 'light' : 'dark';
-        } else if (stored === 'dark') {
-            newTheme = 'light';
+            newTheme = getSystemTheme() === "dark" ? "light" : "dark";
+        } else if (stored === "dark") {
+            newTheme = "light";
         } else {
-            newTheme = 'system';
+            newTheme = "system";
         }
 
         storeTheme(newTheme);
@@ -82,7 +85,7 @@
     // Initialize theme on page load
     function initTheme() {
         const stored = getStoredTheme();
-        if (stored === 'dark' || stored === 'light') {
+        if (stored === "dark" || stored === "light") {
             setTheme(stored);
         }
         // If system preference, don't set data-theme (CSS handles it)
@@ -90,16 +93,16 @@
 
     // Set up the toggle button click handler
     function initToggle() {
-        const toggle = document.getElementById('theme-toggle');
+        const toggle = document.getElementById("theme-toggle");
         if (toggle) {
-            toggle.addEventListener('click', cycleTheme);
+            toggle.addEventListener("click", cycleTheme);
             updateToggleIcon();
         }
     }
 
     // Listen for system theme changes
     function watchSystemTheme() {
-        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+        window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", () => {
             // Only update icon if using system preference
             if (!getStoredTheme()) {
                 updateToggleIcon();
@@ -111,8 +114,8 @@
     initTheme();
 
     // Set up toggle and system watcher when DOM is ready
-    if (document.readyState === 'loading') {
-        document.addEventListener('DOMContentLoaded', () => {
+    if (document.readyState === "loading") {
+        document.addEventListener("DOMContentLoaded", () => {
             initToggle();
             watchSystemTheme();
         });