diff --git a/NEWS.md b/NEWS.md
index 8ff7fda1dd..e4d2ce906f 100644
--- a/NEWS.md
+++ b/NEWS.md
@@ -4,6 +4,8 @@
 
 * Updated `selectizeInput()`'s selectize.js dependency from v0.12.4 to v0.15.2. In addition to many bug fixes and improvements, this update also adds several new [plugin options](https://selectize.dev/docs/demos/plugins). (#3875)
 
+* Shiny's CSS styling for things like `showNotification()`, `withProgress()`, `inputPanel()`, etc., now looks better with `{bslib}`'s upcoming CSS-only dark mode. (#3882)
+
 ## Bug fixes
 
 * `fileInput()` no longer has unwanted round corners applied to the `buttonLabel`. (#3879)
diff --git a/inst/www/shared/shiny_scss/bootstrap.scss b/inst/www/shared/shiny_scss/bootstrap.scss
index a8eabba2ac..7faf14504a 100644
--- a/inst/www/shared/shiny_scss/bootstrap.scss
+++ b/inst/www/shared/shiny_scss/bootstrap.scss
@@ -1,43 +1,42 @@
-$bg: $body-bg !default;
+$prefix: bs- !default; // BS5 CSS variable prefix
 
-$fg: null !default;
-$theme-colors: null !default;
-@if variable-exists('text-color') {
-  $fg: $text-color !default; // BS3
-  $theme-colors: ("primary": $brand-primary, "info": $brand-info, "warning": $brand-warning, "danger": $brand-danger) !default;
-} @else {
-  $fg: $body-color !default; // BS4
-}
-// No $border-width, $border-color, or $border-radius in BS3
+// No $border-width, $border-radius, or $border-color in BS3
 $border-width: 1px !default;
-$border-color: mix($bg, $fg, 70%) !default;
 $border-radius: $border-radius-base !default;
+$border-color: mix($body-bg, $text-color, 70%) !default;
+
+// No rgb CSS vars available in BS3-4
+$primary-rgb: var(--#{$prefix}primary-rgb, red($primary),green($primary),blue($primary)) !default;
+$info-rgb:    var(--#{$prefix}info-rgb, red($info), green($info), blue($info)) !default;
+$warning-rgb: var(--#{$prefix}warning-rgb, red($warning), green($warning), blue($warning)) !default;
+$danger-rgb:  var(--#{$prefix}danger-rgb, red($danger), green($danger), blue($danger)) !default;
+
 
-$shiny-disconnected-bg:             mix($bg, $fg, 58%) !default;
-$shiny-table-na:                    mix($bg, $fg, 54%) !default;
-$shiny-error-validated-color:       mix($bg, $fg, 50%) !default;
-// TODO: what should this be? mix of primary and bg?
-$shiny-progress-text-bg-color:      #eef8ff !default;
-$shiny-input-panel-bg:              mix($bg, $fg, 96%) !default;
-$shiny-input-panel-border:          $border-width solid $border-color !default;
+$shiny-emphasis-color-rgb:          var(--#{$prefix}emphasis-color-rgb, 0,0,0) !default;
+$shiny-disconnected-bg:             RGBA($shiny-emphasis-color-rgb, 0.42) !default;
+$shiny-table-na:                    RGBA($shiny-emphasis-color-rgb, 0.46) !default;
+$shiny-error-validated-color:       RGBA($shiny-emphasis-color-rgb, 0.5) !default;
+$shiny-progress-text-bg-color:      RGBA($primary-rgb, 0.05) !default;
+$shiny-input-panel-bg:              RGBA($shiny-emphasis-color-rgb, 0.04) !default;
+$shiny-input-panel-border:          $border-width solid var(--#{$prefix}border-color, $border-color) !default;
 $shiny-input-panel-border-radius:   $border-radius !default;
 $shiny-text-output-border-radius:   $border-radius !default;
-$notification-bg-color:             mix($bg, $fg, 90%) !default;
-$notification-color:                $fg !default;
-$notification-border:               $border-width solid $border-color !default;
+$notification-bg-color:             RGBA($shiny-emphasis-color-rgb, 0.05) !default;
+$notification-color:                $shiny-emphasis-color-rgb !default;
+$notification-border:               $border-width solid var(--#{$prefix}border-color, $border-color) !default;
 $notification-border-radius:        $border-radius !default;
-$notification-message-bg:           mix($bg, map-get($theme-colors, "info"), 90%) !default;
-$notification-message-color:        mix($fg, map-get($theme-colors, "info"), 10%) !default;
-$notification-message-border:       $border-width solid mix($bg, map-get($theme-colors, "info"), 53%) !default;
-$notification-warning-bg:           mix($bg, map-get($theme-colors, "warning"), 90%) !default;
-$notification-warning-color:        mix($fg, map-get($theme-colors, "warning"), 10%) !default;
-$notification-warning-border:       $border-width solid mix($bg, map-get($theme-colors, "warning"), 71%) !default;
-$notification-error-bg:             mix($bg, map-get($theme-colors, "danger"), 90%) !default;
-$notification-error-color:          mix($fg, map-get($theme-colors, "danger"), 10%) !default;
-$notification-error-border:         $border-width solid mix($bg, map-get($theme-colors, "danger"), 79%) !default;
-$notification-close-color:          mix($bg, $fg, 20%) !default;
-$notification-close-hover-color:    $fg !default;
-$notification-content-action-color: map-get($theme-colors, "primary") !default;
+$notification-message-bg:           RGBA($info-rgb, 0.05) !default;
+$notification-message-color:        RGBA($info-rgb, 1) !default;
+$notification-message-border:       $border-width solid RGBA($info-rgb, 0.5) !default;
+$notification-warning-bg:           RGBA($warning-rgb, 0.05) !default;
+$notification-warning-color:        RGBA($warning-rgb, 0.9) !default;
+$notification-warning-border:       $border-width solid RGBA($warning-rgb, 0.3) !default;
+$notification-error-bg:             RGBA($danger-rgb, 0.05) !default;
+$notification-error-color:          RGBA($danger-rgb, 0.9) !default;
+$notification-error-border:         $border-width solid RGBA($warning-rgb, 0.2) !default;
+$notification-close-color:          RGBA($shiny-emphasis-color-rgb, 0.8) !default;
+$notification-close-hover-color:    RGB($shiny-emphasis-color-rgb) !default;
+$notification-content-action-color: RGB($primary-rgb) !default;
 $datepicker-disabled-color:         $dropdown-link-disabled-color !default;
 
 // I don't think BS3 has a file input box shadow setting