diff --git a/frontend/global-styles/colors-only-bootstrap/_close.scss b/frontend/global-styles/colors-only-bootstrap/_close.scss
index 0919fc7de..bf58db283 100644
--- a/frontend/global-styles/colors-only-bootstrap/_close.scss
+++ b/frontend/global-styles/colors-only-bootstrap/_close.scss
@@ -10,12 +10,12 @@
 // See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
 
 .btn-close {
-  color: $btn-close-color;
+  color: var(--bs-modal-color);
   background: transparent escape-svg($btn-close-bg) center / $btn-close-width auto no-repeat; // include transparent for button elements
 
   // Override <a>'s hover style
   &:hover {
-    color: $btn-close-color;
+    color: var(--bs-modal-color);
   }
 
   &:focus {
diff --git a/frontend/global-styles/dark.scss b/frontend/global-styles/dark.scss
index f754b6b57..b698c31fa 100644
--- a/frontend/global-styles/dark.scss
+++ b/frontend/global-styles/dark.scss
@@ -23,4 +23,8 @@ body.dark {
   --#{$prefix}body-bg: #{$body-bg};
 
   @import "colors-only-bootstrap/bootstrap";
+
+  .btn-close {
+    filter: invert(1);
+  }
 }
diff --git a/frontend/global-styles/variables.dark.scss b/frontend/global-styles/variables.dark.scss
index 0a6f74899..01d757818 100644
--- a/frontend/global-styles/variables.dark.scss
+++ b/frontend/global-styles/variables.dark.scss
@@ -103,6 +103,7 @@ $toast-background-color: $gray-700;
 $toast-header-background-color: $gray-800;
 
 // Modals
+$modal-content-color: $dark;
 $modal-content-bg: $gray-800;
 $modal-content-border-color: $gray-700;
 $modal-header-border-color: $gray-700;