From d591bf277ff05da70787de71dcde2261fa9c8562 Mon Sep 17 00:00:00 2001
From: Charlotte Wickham <cwickham@gmail.com>
Date: Thu, 17 Jul 2025 15:03:15 -0700
Subject: [PATCH] Dark mode tweaks for manuscript

---
 docs/manuscripts/tutorial.css | 62 ++++++++++++++++++++++++++++++++---
 1 file changed, 58 insertions(+), 4 deletions(-)

diff --git a/docs/manuscripts/tutorial.css b/docs/manuscripts/tutorial.css
index b1cae5bfba..4adb33403e 100644
--- a/docs/manuscripts/tutorial.css
+++ b/docs/manuscripts/tutorial.css
@@ -15,7 +15,7 @@
 .nav-tabs .nav-link, 
 .nav-tabs .nav-link.active, 
 .nav-tabs .nav-item.show .nav-link {
-  border: 1px solid  rgb(222, 226, 230);
+  border: 1px solid;
   border-radius: 10px;
 }
 .nav-tabs .nav-link:hover {
@@ -23,6 +23,30 @@
    border-width: 1px;
 } 
 
+
+body.quarto-light .nav-tabs .nav-link:hover {
+   border-color: rgb(80,146,221);
+} 
+body.quarto-dark .nav-tabs .nav-link:hover {
+   border-color: rgb(80,146,221);
+} 
+
+body.quarto-light .nav-tabs .nav-link, 
+body.quarto-light .nav-tabs .nav-link.active, 
+body.quarto-light .nav-tabs .nav-item.show .nav-link {
+  border-color: rgb(222, 226, 230);
+}
+
+body.quarto-dark .nav-tabs .nav-link, 
+body.quarto-dark .nav-tabs .nav-item.show .nav-link {
+  border-color: rgb(40,44,52);
+}
+
+body.quarto-dark .nav-tabs .nav-link.active {
+  border-color: rgb(63, 70, 83);
+}
+
+
 .nav-tabs .nav-link.active, 
 .nav-tabs .nav-item.show .nav-link {
   border-color: rgb(80,146,221);
@@ -99,9 +123,7 @@
 
 .tool a[role="button"] {
   width: 100px;
-  color: rgb(55, 58, 60);
   text-align: center;
-  border: 1px solid rgb(222, 226, 230);
   border-radius: 10px;
   margin-right: 20px;
   margin-bottom: 0;
@@ -109,11 +131,43 @@
   font-size: 0.85em;
 }
 
-.tool .btn-outline-light:hover {
+body.quarto-light .tool a[role="button"] {
+  color: rgb(84, 89, 93);
+  border-color: rgb(222, 226, 230);
+}
+
+body.quarto-dark .tool a[role="button"] {
+  color: #ddd;
+  border-color: rgb(40,44,52);
+}
+
+body.quarto-light .tool .btn-outline-light:hover {
+  border-color: rgb(80,146,221);
+  background-color: transparent;
+}
+
+body.quarto-dark .tool .btn-outline-light:hover {
   border-color: rgb(80,146,221);
   background-color: transparent;
 }
 
+
+body.quarto-light .nav-link.active {
+  color: rgb(84, 89, 93);
+  font-weight: 600;
+}
+body.quarto-dark .nav-link.active {
+  color: #ddd;
+  font-weight: 600;
+}
+
+body.quarto-light .nav-link {
+  color: rgba(55, 58, 60, 0.8);
+}
+body.quarto-dark .nav-link {
+  color: rgba(220, 220, 220, 0.8);
+}
+
 .tool a[role="button"] img {
   display: block;
   width: 67px;