From b097669c5054930d5986329759b6e9c30ba3db05 Mon Sep 17 00:00:00 2001
From: Hadley Wickham <h.wickham@gmail.com>
Date: Thu, 30 May 2024 09:37:57 -0500
Subject: [PATCH] More dark mode tweaks

Shifting from static SCSS variables to  dynamic CSS variables that respond when the mode changes
---
 inst/BS5/assets/pkgdown.scss | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/inst/BS5/assets/pkgdown.scss b/inst/BS5/assets/pkgdown.scss
index 8e29c78fa..28cc9a121 100644
--- a/inst/BS5/assets/pkgdown.scss
+++ b/inst/BS5/assets/pkgdown.scss
@@ -235,7 +235,7 @@ body {
 
 // page header
 .page-header {
-  border-bottom: 1px solid $border-color;
+  border-bottom: 1px solid var(--bs-border-color);
   padding-bottom: 0.5rem;
   margin-bottom: 0.5rem;
   margin-top: 1.5rem;
@@ -277,7 +277,7 @@ h2, h3, h4, h5, h6, dt {
 
 // Give targetted arguments some visual distinction
 dt:target, dt:target + dd {
-  border-left: 0.25rem solid $primary;
+  border-left: 0.25rem solid var(--bs-primary);
   margin-left: -0.75rem;
 }
 dt:target {
@@ -340,7 +340,7 @@ a[href='#main'] {
   position: absolute;
   margin: 4px;
   padding: 0.75rem;
-  background-color: $body-bg;
+  background-color: var(--bs-body-bg);
   text-decoration: none;
   z-index: 2000;
 }
@@ -365,7 +365,7 @@ a.footnote-ref {
 .popover {
   width: Min(100vw, 32rem);
   font-size: 0.9rem;
-  box-shadow: 4px 4px 8px change-color($black, $alpha: 0.3);
+  box-shadow: 4px 4px 8px RGBA(var(--bs-body-color-rgb), 0.3);
 }
 .popover-body {
   padding: 0.75rem;
@@ -430,8 +430,8 @@ pre, pre code {
 }
 
 [data-bs-theme="dark"] pre {
-  background-color: mix($body-bg-dark, $body-color-dark, 90%);
-  border-color: mix($body-bg-dark, $body-color-dark, 80%);
+  background-color: RGBA(var(--bs-body-color-rgb), 0.1);
+  border-color: var(--bs-border-color);
 }
 
 code {
@@ -481,7 +481,7 @@ pre div.gt-table {
 
 code a:any-link {
   color: inherit;
-  text-decoration-color: $gray-600;
+  text-decoration-color: RGBA(var(--bs-body-color-rgb), 0.6);
 }
 
 pre code {