fix #1308 - bad coloring in table in dark mode

src/scss/_variables.scss

@@ -151,8 +151,9 @@ $white: #ffffff !default;
 $light: $gray-50 !default;
 $dark: $gray-800 !default;
 
-$bg-surface: $white !default;
-$bg-surface-dark: $dark !default;
+$bg-surface: var(--#{$prefix}white) !default;
+$bg-surface-secondary: var(--#{$prefix}light) !default;
+$bg-surface-dark: var(--#{$prefix}dark) !default;
 
 $body-bg: $gray-100 !default;
 $body-color: $dark !default;
@@ -472,7 +473,7 @@ $card-border-radius: var(--#{$prefix}border-radius) !default;
 $card-spacer-x: 1.5rem !default;
 $card-spacer-y: 1rem !default;
 
-$card-cap-bg: var(--#{$prefix}gray-50) !default;
+$card-cap-bg: var(--#{$prefix}bg-surface-secondary) !default;
 $card-cap-color: inherit !default;
 $card-cap-padding-x: $card-spacer-x !default;
 $card-cap-padding-y: $card-spacer-y !default;
@@ -668,7 +669,7 @@ $table-th-padding-y: .5rem !default;
 $table-th-color: var(--#{$prefix}muted) !default;
 $table-th-bg: var(--#{$prefix}gray-50) !default;
 $table-striped-order: even !default;
-$table-striped-bg: var(--#{$prefix}gray-50) !default;
+$table-striped-bg: var(--#{$prefix}bg-surface-secondary) !default;
 $table-group-separator-color: var(--#{$prefix}border-color-translucent) !default;
 
 $table-sort-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1'><path d='M5 7l3 -3l3 3'/><path d='M5 10l3 3l3 -3'/></svg>") !default;

src/scss/layout/_dark.scss

@@ -20,6 +20,7 @@ body:not(.theme-dark) .hide-theme-light {
 
     --#{$prefix}bg-forms: #{$dark-mode-darken};
     --#{$prefix}bg-surface: #{$dark};
+    --#{$prefix}bg-surface-secondary: #{$dark-mode-darken};
 
     --#{$prefix}card-bg: #{$dark-mode-darken};
     --#{$prefix}card-bg-hover: #{$dark-mode-darken};

src/scss/layout/_root.scss

@@ -11,8 +11,9 @@
   }
 
   --#{$prefix}bg-surface: #{$bg-surface};
-  --#{$prefix}bg-forms: var(--#{$prefix}bg-surface);
+  --#{$prefix}bg-surface-secondary: #{$bg-surface-secondary};
   --#{$prefix}bg-surface-dark: #{$bg-surface-dark};
+  --#{$prefix}bg-forms: var(--#{$prefix}bg-surface);
 
   --#{$prefix}border-color: #{$border-color};
   --#{$prefix}border-color-light: #{$border-color-light};