Fix: Bootstrap 5 dark mode integration didn't show the info popover a…

…s dark #210
DataTables · Nov 18, 2024 · 421ce61 · 421ce61
1 parent 24a3dd1
commit 421ce61
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 10 deletions.
diff --git a/css/buttons.bootstrap5.scss b/css/buttons.bootstrap5.scss
@@ -96,10 +96,14 @@ div.dt-button-background {
 	}
 }
 
+div.dt-button-info {
+	background-color: var(--bs-body-bg);
+	border: 1px solid var(--bs-border-color-translucent);
+}
+
 :root[data-bs-theme="dark"] {
 	div.dropdown-menu.dt-button-collection.fixed  {
-		background-color: rgb(33, 37, 41);
-		border: 1px solid rgba(255, 255, 255, 0.15);
-		border-radius: 8px;
+		background-color: var(--bs-body-bg);
+		border: 1px solid var(--bs-border-color-translucent);
 	}
 }
diff --git a/css/buttons.dataTables.scss b/css/buttons.dataTables.scss
@@ -294,4 +294,9 @@ html.dark {
 		background-color: rgb(33, 37, 41);
 		box-shadow: 3px 4px 10px 1px rgba(0, 0, 0, 0.8);
 	}
+
+	div.dt-button-info {
+		background-color: var(--dt-html-background);
+		border: 1px solid rgba(255, 255, 255, 0.15);
+	}
 }
diff --git a/css/common.scss b/css/common.scss
@@ -161,10 +161,3 @@ div.dt-button-collection {
 		box-shadow: none !important;
 	}
 }
-
-html.dark {
-	div.dt-button-info {
-		background-color: var(--dt-html-background);
-		border: 1px solid rgba(255, 255, 255, 0.15);
-	}
-}