From 2175b77a4647feeece747d39b8ec8ce0f597c449 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julien=20D=C3=A9ramond?= <juderamond@gmail.com>
Date: Sun, 3 Sep 2023 09:42:22 +0200
Subject: [PATCH 1/2] New Sass variable to handle `<mark>` dark mode color

---
 scss/_root.scss           | 1 +
 scss/_variables-dark.scss | 1 +
 2 files changed, 2 insertions(+)

diff --git a/scss/_root.scss b/scss/_root.scss
index ab720a38e403..35be03ae59b8 100644
--- a/scss/_root.scss
+++ b/scss/_root.scss
@@ -171,6 +171,7 @@
     --#{$prefix}link-hover-color-rgb: #{to-rgb($link-hover-color-dark)};
 
     --#{$prefix}code-color: #{$code-color-dark};
+    --#{$prefix}highlight-bg: #{$mark-bg-dark};
 
     --#{$prefix}border-color: #{$border-color-dark};
     --#{$prefix}border-color-translucent: #{$border-color-translucent-dark};
diff --git a/scss/_variables-dark.scss b/scss/_variables-dark.scss
index 79f29a305853..883858ec2f2d 100644
--- a/scss/_variables-dark.scss
+++ b/scss/_variables-dark.scss
@@ -53,6 +53,7 @@ $headings-color-dark:               inherit !default;
 $link-color-dark:                   tint-color($primary, 40%) !default;
 $link-hover-color-dark:             shift-color($link-color-dark, -$link-shade-percentage) !default;
 $code-color-dark:                   tint-color($code-color, 40%) !default;
+$mark-bg-dark:                      $mark-bg !default;
 
 
 //

From 6880cc2c8547a132799762200fe8f2fce101c661 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julien=20D=C3=A9ramond?= <juderamond@gmail.com>
Date: Wed, 13 Sep 2023 07:19:51 +0200
Subject: [PATCH 2/2] Add new Sass/CSS variable to handle mark color + change
 dark mode bg color

---
 scss/_reboot.scss         | 1 +
 scss/_root.scss           | 2 ++
 scss/_variables-dark.scss | 3 ++-
 scss/_variables.scss      | 1 +
 4 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/scss/_reboot.scss b/scss/_reboot.scss
index 81ea21617d02..18791753d0ca 100644
--- a/scss/_reboot.scss
+++ b/scss/_reboot.scss
@@ -217,6 +217,7 @@ small {
 
 mark {
   padding: $mark-padding;
+  color: var(--#{$prefix}highlight-color);
   background-color: var(--#{$prefix}highlight-bg);
 }
 
diff --git a/scss/_root.scss b/scss/_root.scss
index 35be03ae59b8..becddf14afdc 100644
--- a/scss/_root.scss
+++ b/scss/_root.scss
@@ -91,6 +91,7 @@
   }
 
   --#{$prefix}code-color: #{$code-color};
+  --#{$prefix}highlight-color: #{$mark-color};
   --#{$prefix}highlight-bg: #{$mark-bg};
 
   // scss-docs-start root-border-var
@@ -171,6 +172,7 @@
     --#{$prefix}link-hover-color-rgb: #{to-rgb($link-hover-color-dark)};
 
     --#{$prefix}code-color: #{$code-color-dark};
+    --#{$prefix}highlight-color: #{$mark-color-dark};
     --#{$prefix}highlight-bg: #{$mark-bg-dark};
 
     --#{$prefix}border-color: #{$border-color-dark};
diff --git a/scss/_variables-dark.scss b/scss/_variables-dark.scss
index 883858ec2f2d..6422b3874413 100644
--- a/scss/_variables-dark.scss
+++ b/scss/_variables-dark.scss
@@ -53,7 +53,8 @@ $headings-color-dark:               inherit !default;
 $link-color-dark:                   tint-color($primary, 40%) !default;
 $link-hover-color-dark:             shift-color($link-color-dark, -$link-shade-percentage) !default;
 $code-color-dark:                   tint-color($code-color, 40%) !default;
-$mark-bg-dark:                      $mark-bg !default;
+$mark-color-dark:                   $body-color-dark !default;
+$mark-bg-dark:                      $yellow-800 !default;
 
 
 //
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 7706c0f6a5e0..8b743787870f 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -718,6 +718,7 @@ $dt-font-weight:              $font-weight-bold !default;
 $list-inline-padding:         .5rem !default;
 
 $mark-padding:                .1875em !default;
+$mark-color:                  $body-color !default;
 $mark-bg:                     $yellow-100 !default;
 // scss-docs-end type-variables