Merge pull request #2051 from weseek/support/adjust-table-color-for-dark-mode

Support/adjust table color for dark mode

src/client/styles/scss/theme/_apply-colors-dark.scss

@@ -64,6 +64,10 @@ textarea.form-control {
 /*
  * Table
  */
+.table {
+  @extend .table-dark;
+}
+
 .table > thead > tr > th,
 .table > tbody > tr > th,
 .table > tfoot > tr > th,

src/client/styles/scss/theme/_apply-colors.scss

@@ -11,6 +11,7 @@ $link-hover-color: $color-link-hover;
 @import '~bootstrap/scss/functions';
 @import '~bootstrap/scss/variables';
 @import '~bootstrap/scss/mixins';
+@import 'mixins-for-tables';
 @import 'reboot-bootstrap-colors';
 @import 'reboot-bootstrap-theme-colors';
 @import 'reboot-toastr-colors';

src/client/styles/scss/theme/_mixins-for-tables.scss

@@ -0,0 +1,34 @@
+//== Table
+$table-variants: (
+  'light': $light,
+  'dark': $dark,
+);
+
+// remove when master version is released
+// show https://github.com/twbs/bootstrap/blob/28cb1ff2b23253293601c51aff434c39b461025e/scss/mixins/_table-variants.scss
+@mixin table-variant($state, $background) {
+  .table-#{$state} {
+    $table-hover-bg-factor: 0.075 !default;
+    $table-striped-bg-factor: 0.05 !default;
+    $body-bg: $white !default;
+    $table-active-bg-factor: 0.1 !default;
+    $table-border-factor: 0.1 !default;
+
+    $color: color-contrast(mix(rgba($background, 1), $body-bg, opacity($background) * 100));
+    $color: gray;
+    $hover-bg: mix($color, $background, percentage($table-hover-bg-factor));
+    $striped-bg: mix($color, $background, percentage($table-striped-bg-factor));
+    $active-bg: mix($color, $background, percentage($table-active-bg-factor));
+
+    --bs-table-bg: #{$background};
+    --bs-table-striped-bg: #{$striped-bg};
+    --bs-table-striped-color: #{color-contrast($striped-bg)};
+    --bs-table-active-bg: #{$active-bg};
+    --bs-table-active-color: #{color-contrast($active-bg)};
+    --bs-table-hover-bg: #{$hover-bg};
+    --bs-table-hover-color: #{color-contrast($hover-bg)};
+
+    color: $color;
+    border-color: mix($color, $background, percentage($table-border-factor));
+  }
+}

src/client/styles/scss/theme/_reboot-bootstrap-theme-colors.scss

@@ -63,3 +63,7 @@
     background: $color;
   }
 }
+
+@each $color, $value in $table-variants {
+  @include table-variant($color, $value);
+}

src/client/styles/scss/theme/default.scss

@@ -1,6 +1,5 @@
 @import '../variables';
 @import '../override-bootstrap-variables';
-
 // == Define Bootstrap theme colors
 //