diff --git a/addons/web/static/src/scss/bootstrap_review_frontend.scss b/addons/web/static/src/scss/bootstrap_review_frontend.scss
index f4b11b3ed35..a74f0991e90 100644
--- a/addons/web/static/src/scss/bootstrap_review_frontend.scss
+++ b/addons/web/static/src/scss/bootstrap_review_frontend.scss
@@ -102,3 +102,68 @@ $o-navbar-nav-pills-link-border-radius: $nav-pills-border-radius !default;
     // Ensure circle for one digit numbers
     font-variant-numeric: tabular-nums;
 }
+
+// Modal
+.modal-content {
+    // If the text color of the body (used for the text color in modals) is not
+    // visible due to insufficient contrast with the modal background, we adjust
+    // the text color in the modal using the following code. For example, if the
+    // user sets a black background for its website and the text color of the
+    // body is white, the text will not be visible on modals with a white
+    // background.
+
+    // Check if the body text color is light.
+    $-is-body-text-light: color-contrast($body-color) == $color-contrast-dark;
+
+    @if $modal-content-color == null {
+        color: if(
+            $-is-body-text-light,
+            color-contrast($modal-content-bg, $body-color, $color-contrast-dark),
+            color-contrast($modal-content-bg, $color-contrast-light, $body-color)
+        );
+
+        // This prevents these elements from taking their colors from the body
+        // inside a modal.
+        // We need to exclude 'oe_structure' that are areas containing editable
+        // snippets. Indeed, this code was added in a stable version, and we are
+        // doing everything not to alter the content edited by users. For
+        // example in Website, without this 'not', the 's_website_form' snippets
+        // with a black background in modals and on websites with a black
+        // background would have their input background changing from black to
+        // white.
+        // TODO: In Master, find a more consistent way to define the background
+        // color of 's_website_form' snippet inputs inside a modal.
+        &:where(:not(.oe_structure)) {
+            @if ($input-bg == $body-bg) {
+                .form-control {
+                    background-color: $modal-content-bg;
+                    color: color-contrast($modal-content-bg);
+                }
+            }
+            @if ($form-select-bg == $body-bg) {
+                .form-select {
+                    background-color: $modal-content-bg;
+                    color: color-contrast($modal-content-bg);;
+                }
+            }
+            @if $form-check-input-bg == $body-bg {
+                .form-check-input:not(:checked) {
+                    background-color: $modal-content-bg;
+                }
+            }
+        }
+    }
+    @if $-is-body-text-light {
+        .text-muted {
+            color: color-contrast($modal-content-bg, $text-muted, mute-color($color-contrast-dark)) !important;
+        }
+    }
+}
+
+// Form
+.form-check-input {
+    // Without this line, the border of the checkboxes is not visible when the
+    // body is dark. This is due to the fact that the borders are defined based
+    // on the 'currentColor' of the inputs.
+    color: inherit;
+}
diff --git a/addons/website_sale/static/src/scss/product_configurator.scss b/addons/website_sale/static/src/scss/product_configurator.scss
index 95bdc5e9cd3..9ce919ce747 100644
--- a/addons/website_sale/static/src/scss/product_configurator.scss
+++ b/addons/website_sale/static/src/scss/product_configurator.scss
@@ -77,13 +77,26 @@ option.css_not_available {
     color: #ccc;
 }
 
+$-arrow-url: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='175' height='100' fill='#000'><polygon points='0,0 100,0 50,50'/></svg>");
+
 select.form-select.css_attribute_select {
-    background-image: str-replace(url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='175' height='100' fill='#{$input-color}'><polygon points='0,0 100,0 50,50'/></svg>"), "#", "%23") ;
+    background-image: str-replace($-arrow-url, "#000", str-replace(#{$input-color}, "#", "%23"));
     background-size: 20px;
     background-position: 100% 65%;
     background-repeat: no-repeat;
     max-width: 400px;
 }
+// In the case of a modal, we cannot rely on '$input-color' to define the color
+// of the select arrow because '$input-color' is set based on the background
+// color of the body. In modals, the input color is adjusted based on the
+// modal's background color (see 'bootstrap_review_frontend.scss').
+@if ($modal-content-color == null) and ($form-select-bg == $body-bg) {
+    .modal-content {
+        select.form-select.css_attribute_select {
+            background-image: str-replace($-arrow-url, "#000", str-replace(#{color-contrast($modal-content-bg)}, "#", "%23"));
+        }
+    }
+}
 
 label, .o_variant_pills {
     &.css_not_available {