Merge pull request #4548 from DastardlySky/fix-bootstrap-5-dark-mode

fix dark mode for Bootstrap 5

Author: rathboma

src/scss/themes/bootstrap/tabulator_bootstrap5.scss

@@ -178,20 +178,6 @@ $table-cell-padding-sm: 5px;
 
 	//Bootstrap theming classes
 
-	&.thead-dark{
-		.tabulator-header{
-			border-color: $borderColor;
-			background-color: $backgroundColor;
-			color: $table-color;
-
-			.tabulator-col{
-				border-color: $borderColor;
-				background-color: $backgroundColor;
-				color: $table-color;
-			}
-		}
-	}
-
 	&.table{
 		background-color: $backgroundColor;
 
@@ -347,6 +333,129 @@ $table-cell-padding-sm: 5px;
 	}
 
 
+
+	&.thead-dark{
+		.tabulator-header{
+			border-color: $table-dark-border-color;
+			background-color: $table-dark-bg;
+			color: $table-dark-color;
+
+			.tabulator-col{
+				border-color: $table-dark-border-color;
+				background-color: $table-dark-bg;
+				color: $table-dark-color;
+			}
+		}
+	}
+
+	&.table-striped{
+		&:not(.table-dark),
+		html:not([data-bs-theme="dark"]) &{
+			.tabulator-row{
+				&.tabulator-row-even{
+					background-color: $rowAltBackgroundColor;
+
+					&.tabulator-selected{
+						background-color:$rowSelectedBackground;
+					}
+
+					@media (hover:hover) and (pointer:fine){
+						&.tabulator-selectable:hover{
+							background-color:$rowHoverBackground;
+							cursor: pointer;
+						}
+						
+						&.tabulator-selected:hover{
+							background-color:$rowSelectedBackgroundHover;
+							cursor: pointer;
+						}
+					}
+				}
+			}
+		}
+
+		&.table-dark, 
+		html[data-bs-theme="dark"] & {
+			.tabulator-row{
+				&:nth-child(even){
+					background-color: $table-dark-striped-bg !important;
+					.tabulator-cell{
+						background-color: inherit;
+					}
+				}
+			}
+		}
+	}
+
+	&.table-dark, 
+	html[data-bs-theme="dark"] &{
+		background-color: $table-dark-bg;
+
+		&:not(.thead-light) .tabulator-header{
+			border-color: $table-dark-border-color;
+			background-color: $table-dark-bg;
+			color: $table-dark-color;
+
+			.tabulator-col{
+				border-color: $table-dark-border-color;
+				background-color: $table-dark-bg;
+				color: $table-dark-color;
+			}
+		}
+
+		.tabulator-tableholder{
+			color: $table-dark-color;
+		}
+
+		.tabulator-cell {
+			color: $table-dark-color;
+			background-color: $table-dark-bg;
+			border-color: $table-dark-border-color;
+		}	
+
+		.tabulator-row{
+			border-color: $table-dark-border-color;
+			background-color: $table-dark-bg;
+			color: $table-dark-color;
+
+			@media (hover:hover) and (pointer:fine){
+				&:hover{
+					background-color: $table-dark-border-color;
+
+					.tabulator-cell{
+						background-color: $table-dark-hover-bg;
+					}
+				}
+			}
+
+			&.tabulator-selected{
+				background-color:$table-dark-active-bg;
+			}
+		}
+
+		.tabulator-footer{
+			border-color: $table-dark-border-color !important;
+			color: $table-dark-bg !important;
+
+			.tabulator-calcs-holder{
+				border-color: $table-dark-border-color !important;
+				background:$table-dark-bg !important;
+
+				.tabulator-row{
+					border-color: $table-dark-border-color !important;
+					background-color: $table-dark-bg !important;
+					color: $table-dark-color !important;
+				}
+			}
+		}
+
+		input {
+			color: $table-dark-color !important;
+			background-color: $table-active-bg !important;
+		  }
+		  
+	}
+
 	//row colors
 	.tabulator-tableholder{
 		.tabulator-table{

src/scss/themes/bootstrap/variables5.scss

@@ -695,6 +695,17 @@ $table-color:                 $body-color !default;
 $table-bg:                    #fff !default;
 $table-accent-bg:             transparent !default;
 
+$table-dark-color:					 #fff;
+$table-dark-bg:							 #212529;
+$table-dark-border-color:    #4d5154;
+$table-dark-striped-bg:      #2c3034;
+$table-dark-striped-color:   #fff;
+$table-dark-active-bg:       #373b3e;
+$table-dark-active-color:    #fff;
+$table-dark-hover-bg:        #323539;
+$table-dark-hover-color:     #fff;
+
+
 $table-th-font-weight:        null !default;
 
 $table-striped-color:         $table-color !default;
@@ -720,6 +731,7 @@ $table-group-separator-color: currentColor !default;
 $table-caption-color:         $text-muted !default;
 
 $table-bg-scale:              -80% !default;
+
 // scss-docs-end table-variables
 
 // scss-docs-start table-loop
@@ -1638,4 +1650,4 @@ $kbd-font-size:                     $code-font-size !default;
 $kbd-color:                         $white !default;
 $kbd-bg:                            $gray-900 !default;
 
-$pre-color:                         null !default;
+$pre-color:                         null !default;