fix(datatable): colors of DataTable are now theme-dependent

Author: marekdedic

packages/svelte-materialify/src/components/DataTable/_variables.scss

@@ -1,7 +1,7 @@
 @import '../../styles/variables';
 
-$tbl-border-color: rgba(0, 0, 0, 0.12);
+$tbl-border-color: var(--theme-dividers);
 $tbl-border-radius: $border-radius-root !default;
 $tbl-border-width: 1px;
-$tbl-background-hover: rgba(0, 0, 0, 0.04);
+$tbl-background-hover: var(--theme-datatables-row-hover);
 $tbl-head-font-weight: map-get($font-weights, 'medium');

packages/svelte-materialify/src/styles/_variables.scss

@@ -298,6 +298,9 @@ $material-light-theme: map-deep-merge(
       'hover': material-color('grey', 'lighten-3'),
       'group': material-color('grey', 'lighten-3'),
     ),
+    'datatables': (
+      'row-hover': rgba(material-color('shades', 'black'), 0.04),
+    ),
     'dividers': rgba(material-color('shades', 'black'), 0.12),
     'chips': #e0e0e0,
     'cards': material-color('shades', 'white'),
@@ -366,6 +369,9 @@ $material-dark-theme: map-deep-merge(
       'hover': material-color('grey', 'darken-2'),
       'group': material-color('grey', 'darken-2'),
     ),
+    'datatables': (
+      'row-hover': rgba(material-color('shades', 'white'), 0.04),
+    ),
     'dividers': rgba(material-color('shades', 'white'), 0.12),
     'chips': #555555,
     'cards': map-get($material-dark-elevation-colors, '1'),