From 438a5466e0d49572858f51f32e6d0a84326a4421 Mon Sep 17 00:00:00 2001 From: Tilman Vatteroth Date: Mon, 27 Mar 2023 14:54:30 +0200 Subject: [PATCH] fix: show modal close button with correct color in dark mode Signed-off-by: Tilman Vatteroth --- frontend/global-styles/colors-only-bootstrap/_close.scss | 4 ++-- frontend/global-styles/dark.scss | 4 ++++ frontend/global-styles/variables.dark.scss | 1 + 3 files changed, 7 insertions(+), 2 deletions(-) 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 '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;