From 5b9d02403735195f8d850e5d635bbca1e5ae89d7 Mon Sep 17 00:00:00 2001
From: Cassidy James <cassidyjames@roost.tools>
Date: Fri, 10 Jul 2026 16:11:44 -0600
Subject: [PATCH] theme: Rework light/dark variables + fixes (#79)

Fixes #64 and lots of other little issues with the style, with the goal
of using the style across other docs sites
---
 book.toml           |   2 +
 theme/css/roost.css | 159 ++++++++++++++++++++++++++++++++++++++------
 2 files changed, 141 insertions(+), 20 deletions(-)

diff --git a/book.toml b/book.toml
index 0a49765..0416bf2 100644
--- a/book.toml
+++ b/book.toml
@@ -8,6 +8,8 @@ src = "."
 build-dir = "./book"
 
 [output.html]
+default-theme = "light"
+preferred-dark-theme = "navy"
 additional-css = ["theme/css/roost.css"]
 edit-url-template = "https://github.com/roostorg/community/edit/main/{path}"
 git-repository-url = "https://github.com/roostorg"
diff --git a/theme/css/roost.css b/theme/css/roost.css
index c5c2870..1bc526a 100644
--- a/theme/css/roost.css
+++ b/theme/css/roost.css
@@ -1,39 +1,84 @@
-/* Surgical overrides here; be mindful of alternate themes */
-
 :root {
+  color-scheme: light dark;
+  background-color: var(--roost-charcoal);
+
   --roost-gray: rgb(187 193 190);
   --roost-charcoal: hsl(80, 22%, 13%);
   --roost-yellow: rgb(238 238 0);
   --roost-peach: rgb(247 187 128);
   --roost-muddy: rgb(229 217 136);
 
-  --sidebar-resize-indicator-space: 0;
-}
-
-.light, html:not(.js), .navy {
-  --bg: rgb(250 250 250);
+  --color-scheme: light;
+  --bg: rgba(250 250 250);
   --fg: var(--roost-charcoal);
-
+  --sidebar-header-border-color: oklch(from var(--roost-yellow) calc(l * 0.95) c h);
+  --sidebar-resize-indicator-space: 0;
   --sidebar-bg: var(--roost-charcoal);
   --sidebar-fg: rgba(255 255 255 / 0.9);
   --sidebar-non-existant: #5c6773;
   --sidebar-active: var(--roost-muddy);
   --sidebar-spacer: var(--roost-muddy);
-  --sidebar-header-border-color: oklch(from var(--roost-yellow) calc(l * 0.95) c h);
 
   --icons: white;
   --icons-hover: var(--roost-yellow);
-
   --links: inherit;
+
+  --theme-popup-bg: var(--bg);
+  --theme-popup-border: color-mix(var(--fg) 15%, transparent);
+  --theme-hover: color-mix(var(--fg) 4%, transparent);
+
+  --quote-bg: color-mix(var(--fg) 3%, transparent);
+  --quote-border: color-mix(var(--fg) 10%, transparent);
+
+  --searchbar-bg: color-mix(var(--fg) 3%, transparent);
+  --searchbar-fg: inherit;
+  --searchbar-border-color: color-mix(var(--fg) 10%, transparent);
+  --searchbar-shadow-color: var(--roost-peach);
+  --searchbar-margin-block-start: 2em;
+
+  --warning-border: color-mix(orange, var(--fg));
+
+  --table-border-color: color-mix(var(--fg) 7%, var(--bg));
+  --table-header-bg: color-mix(var(--fg) 10%, var(--bg));
+  --table-alternate-bg: color-mix(var(--fg) 3%, var(--bg));
+
+  --scrollbar: color-mix(var(--fg), transparent);
+
+  --inline-code-color: inherit;
+
+  --searchresults-header-fg: color-mix(var(--roost-peach) 75%, var(--fg));
+  --searchresults-border-color: color-mix(var(--fg), transparent);
+  --searchresults-li-bg: color-mix(var(--roost-yellow) 20%, transparent);
+  --search-mark-bg: color-mix(var(--roost-yellow), transparent);
+  --footnote-highlight: var(--search-mark-bg);
+
+  --copy-button-filter: none;
+  --copy-button-filter-hover: invert(20%);
+
+  --blockquote-note-color: color-mix(blue, var(--fg));
+  --blockquote-tip-color: color-mix(lime, var(--fg));
+  --blockquote-important-color: color-mix(fuchsia, var(--fg));
+  --blockquote-warning-color: var(--warning-border);
+  --blockquote-caution-color: color-mix(red, var(--fg));
+
+  --overlay-bg: color-mix(var(--fg), transparent);
 }
 
-.navy {
-  --bg: color-mix(var(--roost-charcoal) 90%, black);
-  --fg: rgba(255 255 255 / 0.9);
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --color-scheme: dark;
+    --bg: color-mix(var(--roost-charcoal) 90%, black);
+    --fg: rgba(255 255 255 / 0.9);
+    --copy-button-filter: invert(80%);
+    --copy-button-filter-hover: invert(100%);
+  }
 }
 
-#mdbook-theme-toggle {
-  display: none;
+/* Style */
+
+#mdbook-searchbar {
+  border-radius: 999px;
 }
 
 #mdbook-menu-bar {
@@ -42,10 +87,6 @@
   box-shadow: 0 0.25em 1em rgba(0 0 0 / 0.25);
 }
 
-#mdbook-sidebar-resize-handle {
-  background-color: var(--sidebar-bg);
-}
-
 .content {
   padding: 2em 1em 1em;
 }
@@ -59,8 +100,86 @@ a:link.mobile-nav-chapters {
   color: var(--roost-yellow);
 }
 
+.content img {
+  border: 0.5em solid color-mix(var(--bg) 80%, white);
+  box-shadow: 0 0.25em 0.5em 0.25em rgba(0 0 0 / 0.1 );
+  box-sizing: border-box;
+  margin-block: 0.5em;
+}
+
 .blockquote-tag {
-  background: color-mix(var(--fg) 3%, transparent);
+  background: var(--quote-bg);
   border-radius: 0.25em;
   padding: 1em;
 }
+
+#mdbook-searchbar {
+  transition: none;
+}
+
+ul#mdbook-searchresults li {
+  margin-block: 1.25em;
+}
+
+.menu-title {
+  font-weight: 600;
+}
+
+table {
+  width: 100%;
+}
+
+table td,
+table thead th {
+  padding: 0.25em 0.5em;
+}
+
+table td {
+  text-wrap: balance;
+}
+
+dt {
+  margin-block: 1.5em 0;
+}
+
+dd {
+  margin-inline-start: 1em;
+  margin-block: 0.25em;
+}
+
+hr {
+  margin-block: 2em;
+  opacity: 0.25;
+}
+
+/* Fixes */
+
+body {
+  background-color: var(--bg);
+  min-height: calc(100vh + var(--menu-bar-height));
+}
+
+#mdbook-theme-toggle {
+  display: none;
+}
+
+#mdbook-sidebar {
+  z-index: 102;
+}
+
+#mdbook-sidebar-resize-handle {
+  background-color: var(--sidebar-bg);
+}
+
+#mdbook-searchbar:focus-visible {
+  outline: 1px solid color-mix(var(--searchbar-shadow-color), transparent);
+}
+
+:not(pre):not(a) > .hljs {
+  background: color-mix(var(--fg) 10%, transparent);
+}
+
+.nav-wide-wrapper {
+  --icons: color-mix(var(--fg) 25%, transparent);
+  --icons-hover: var(--fg);
+}
-- 
2.51.2