New: Dark mode support for DataTables and Bootstrap 5.3+ styling

Author: AllanJard

css/scroller.bootstrap5.scss

@@ -3,4 +3,11 @@
 div.DTS div.dataTables_scrollBody table {
 	// Don't have transparent rows
 	background-color: white;
-}
+}
+
+html[data-bs-theme="dark"] {
+	div.DTS div.dataTables_scrollBody table {
+		// Don't have transparent rows
+		background-color: var(--bs-body-bg);
+	}
+}

css/scroller.dataTables.scss

@@ -15,7 +15,7 @@ div.dts {
 
 	div.dts_label {
 		position: absolute;
-		right: 10px;
+		right: 20px;
 		background: rgba(0, 0, 0, 0.8);
 		color: white;
 		box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.5);
@@ -29,10 +29,10 @@ div.dts {
 	div.dataTables_scrollBody {
 		background: repeating-linear-gradient(
 			45deg,
-			#edeeff,
-			#edeeff 10px,
-			white 10px,
-			white 20px
+			rgba(0, 0, 0, 0.025),
+			rgba(0, 0, 0, 0.025) 10px,
+			rgba(0, 0, 0, 0) 10px,
+			rgba(0, 0, 0, 0) 20px
 		);
 
 		table {
@@ -48,3 +48,27 @@ div.dts {
 		display: none;
 	}
 }
+
+html.dark {
+	div.dts {
+		div.dts_label {
+			background: rgba(255, 255, 255, 0.8);
+			color: black;
+		}
+
+		div.dataTables_scrollBody {
+			background: repeating-linear-gradient(
+				45deg,
+				rgba(255, 255, 255, 0.025),
+				rgba(255, 255, 255, 0.025) 10px,
+				rgba(255, 255, 255, 0) 10px,
+				rgba(255, 255, 255, 0) 20px
+			);
+	
+			table {
+				background-color: var(--dt-html-background);
+				z-index: 2;
+			}
+		}
+	}
+}

js/dataTables.scroller.js

@@ -1058,7 +1058,6 @@ $.extend(Scroller.prototype, {
 			this.dom.label
 				.html(this.s.dt.fnFormatNumber(parseInt(this.s.topRowFloat, 10) + 1))
 				.css('top', iScrollTop + iScrollTop * labelFactor)
-				.css('right', 10 - this.dom.scroller.scrollLeft)
 				.css('display', 'block');
 		}
 	},