Dark mode tweaks for manuscript

Author: cwickham

docs/manuscripts/tutorial.css

@@ -15,14 +15,38 @@
 .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 {
    border-color: rgb(80,146,221);
    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,21 +123,51 @@
 
 .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;
   margin-top: 10px;
   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;