reveal, kbd - apply same logic as in bootstrap for dark theme

Author: cderv

news/changelog-1.6.md

@@ -12,6 +12,10 @@ All changes included in 1.6:
 - ([#10328](https://github.com/quarto-dev/quarto-cli/issues/10328)): Interpret subcells as subfloats when subcap count matches subcell count.
 - ([#10624](https://github.com/quarto-dev/quarto-cli/issues/10624)): Don't crash when proof environments are empty in `pdf`.
 
+## `html` Format
+
+- Fix `kbd` element styling on dark themes.
+
 ## `revealjs` Format
 
 - Update to Reveal JS 5.1.0.

src/resources/formats/revealjs/quarto.scss

@@ -18,6 +18,11 @@ $body-bg: #fff !default;
 $body-color: #222 !default;
 $text-muted: lighten($body-color, 30%) !default;
 
+// grey colors (like in bootstrap)
+$gray-200: #e9ecef !default;
+$gray-100: #f8f9fa !default;
+$gray-900: #212529 !default;
+
 // link colors
 $primary: #2a76dd !default;
 $link-color: $primary !default;
@@ -161,7 +166,7 @@ $kbd-padding-y: 0.4rem !default;
 $kbd-padding-x: 0.4rem !default;
 $kbd-font-size: $presentation-font-size-root !default;
 $kbd-color: $body-color !default;
-$kbd-bg: $body-bg !default;
+$kbd-bg: $gray-100 !default; // like in bootstrap style
 
 /*-- scss:functions --*/
 
@@ -170,8 +175,34 @@ $kbd-bg: $body-bg !default;
     ")";
 }
 
+@function tint-color($color, $weight) {
+  @return mix(white, $color, $weight);
+}
+
+@function shade-color($color, $weight) {
+  @return mix(black, $color, $weight);
+}
+
+@function shift-color($color, $weight) {
+  @return if(
+    $weight > 0,
+    shade-color($color, $weight),
+    tint-color($color, -$weight)
+  );
+}
+
 /*-- scss:mixins --*/
 
+@mixin shift_to_dark($property, $color) {
+  @if (
+    sass-color.blackness($backgroundColor) > $code-block-theme-dark-threshhold
+  ) {
+    #{$property}: shift-color($color, 70%);
+  } @else {
+    #{$property}: $color;
+  }
+}
+
 // -- START setting.scss --
 
 // Generates the presentation background, can be overridden
@@ -752,7 +783,7 @@ kbd {
   font-family: $font-family-monospace;
   font-size: $kbd-font-size;
   color: $kbd-color;
-  background-color: $kbd-bg;
+  @include shift_to_dark("background-color", $kbd-bg);
   border: 1px solid;
   border-color: $code-block-border-color;
   border-radius: 5px;