diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/table-widget.models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/table-widget.models.ts
index 7e91a2f043..8f36242d95 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/table-widget.models.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/table-widget.models.ts
@@ -451,107 +451,36 @@ export function constructTableCssString(widgetConfig: WidgetConfig): string {
   const mdDarkDisabled = defaultColor.setAlpha(0.26).toRgbString();
   const mdDarkDisabled2 = defaultColor.setAlpha(0.38).toRgbString();
   const mdDarkDivider = defaultColor.setAlpha(0.12).toRgbString();
-
-  const cssString =
-    '.mat-mdc-input-element::placeholder {\n' +
-    '   color: ' + mdDarkSecondary + ';\n' +
-    '}\n' +
-    '.mat-mdc-input-element::-moz-placeholder {\n' +
-    '   color: ' + mdDarkSecondary + ';\n' +
-    '}\n' +
-    '.mat-mdc-input-element::-webkit-input-placeholder {\n' +
-    '   color: ' + mdDarkSecondary + ';\n' +
-    '}\n' +
-    '.mat-mdc-input-element:-ms-input-placeholder {\n' +
-    '   color: ' + mdDarkSecondary + ';\n' +
-    '}\n' +
-    'mat-toolbar.mat-mdc-table-toolbar {\n' +
-    'color: ' + mdDark + ';\n' +
-    '}\n' +
-    'mat-toolbar.mat-mdc-table-toolbar:not([color="primary"]) button.mat-mdc-icon-button mat-icon {\n' +
-    'color: ' + mdDarkSecondary + ';\n' +
-    '}\n' +
-    '.mat-mdc-tab .mdc-tab__text-label {\n' +
-    'color: ' + mdDark + ';\n' +
-    '}\n' +
-    '.mat-mdc-tab-header-pagination-chevron {\n' +
-    'border-color: ' + mdDark + ';\n' +
-    '}\n' +
-    '.mat-mdc-tab-header-pagination-disabled .mat-mdc-tab-header-pagination-chevron {\n' +
-    'border-color: ' + mdDarkDisabled2 + ';\n' +
-    '}\n' +
-    '.mat-mdc-table .mat-mdc-header-row {\n' +
-    'background-color: ' + origBackgroundColor + ';\n' +
-    '}\n' +
-    '.mat-mdc-table .mat-mdc-header-cell {\n' +
-    'color: ' + mdDarkSecondary + ';\n' +
-    '}\n' +
-    '.mat-mdc-table .mat-mdc-cell, .mat-mdc-table .mat-mdc-header-cell {\n' +
-    'border-bottom-color: ' + mdDarkDivider + ';\n' +
-    '}\n' +
-    '.mat-mdc-table .mat-mdc-cell .mat-mdc-checkbox ' +
-    '.mdc-checkbox__native-control:focus:enabled:not(:checked):not(:indeterminate):not([data-indeterminate=true])'+
-    '~.mdc-checkbox__background, ' +
-    '.mat-table .mat-header-cell .mat-mdc-checkbox ' +
-    '.mdc-checkbox__native-control:focus:enabled:not(:checked):not(:indeterminate):not([data-indeterminate=true])'+
-    '~.mdc-checkbox__background {\n' +
-    'border-color: ' + mdDarkSecondary + ';\n' +
-    '}\n' +
-    '.mat-mdc-table .mat-mdc-row .mat-mdc-cell.mat-mdc-table-sticky {\n' +
-    'transition: background-color .2s;\n' +
-    '}\n' +
-    '.mat-mdc-table .mat-mdc-row.tb-current-entity {\n' +
-    'background-color: ' + currentEntityColor + ';\n' +
-    '}\n' +
-    '.mat-mdc-table .mat-mdc-row.tb-current-entity .mat-mdc-cell.mat-mdc-table-sticky {\n' +
-    'background-color: ' + currentEntityStickyColor + ';\n' +
-    '}\n' +
-    '.mat-mdc-table .mat-mdc-row:hover:not(.tb-current-entity) {\n' +
-    'background-color: ' + hoverColor + ';\n' +
-    '}\n' +
-    '.mat-mdc-table .mat-mdc-row:hover:not(.tb-current-entity) .mat-mdc-cell.mat-mdc-table-sticky {\n' +
-    'background-color: ' + hoverStickyColor + ';\n' +
-    '}\n' +
-    '.mat-mdc-table .mat-mdc-row.mat-row-select.mat-selected:not(.tb-current-entity) {\n' +
-    'background-color: ' + selectedColor + ';\n' +
-    '}\n' +
-    '.mat-mdc-table .mat-mdc-row.mat-row-select.mat-selected:not(.tb-current-entity) .mat-mdc-cell.mat-mdc-table-sticky {\n' +
-    'background-color: ' + selectedStickyColor + ';\n' +
-    '}\n' +
-    '.mat-mdc-table .mat-mdc-row .mat-mdc-cell.mat-mdc-table-sticky, .mat-mdc-table .mat-mdc-header-cell.mat-mdc-table-sticky {\n' +
-    'background-color: ' + origBackgroundColor + ';\n' +
-    '}\n' +
-    '.mat-mdc-table .mat-mdc-row {\n' +
-    'color: ' + mdDark + ';\n' +
-    'background-color: rgba(0, 0, 0, 0);\n' +
-    '}\n' +
-    '.mat-mdc-table .mat-mdc-cell button.mat-mdc-icon-button mat-icon {\n' +
-    'color: ' + mdDarkSecondary + ';\n' +
-    '}\n' +
-    '.mat-mdc-table .mat-mdc-cell button.mat-mdc-icon-button[disabled][disabled] mat-icon {\n' +
-    'color: ' + mdDarkDisabled + ';\n' +
-    '}\n' +
-    '.mat-mdc-table .mat-mdc-cell button.mat-mdc-icon-button tb-icon {\n' +
-    'color: ' + mdDarkSecondary + ';\n' +
-    '}\n' +
-    '.mat-mdc-table .mat-mdc-cell button.mat-mdc-icon-button[disabled][disabled] tb-icon {\n' +
-    'color: ' + mdDarkDisabled + ';\n' +
-    '}\n' +
-    '.mat-divider {\n' +
-    'border-top-color: ' + mdDarkDivider + ';\n' +
-    '}\n' +
-    '.mat-mdc-paginator {\n' +
-    'color: ' + mdDarkSecondary + ';\n' +
-    '}\n' +
-    '.mat-mdc-paginator button.mat-mdc-icon-button {\n' +
-    'color: ' + mdDarkSecondary + ';\n' +
-    '}\n' +
-    '.mat-mdc-paginator button.mat-mdc-icon-button[disabled][disabled] {\n' +
-    'color: ' + mdDarkDisabled + ';\n' +
-    '}\n' +
-    '.mat-mdc-paginator .mat-mdc-select-value {\n' +
-    'color: ' + mdDarkSecondary + ';\n' +
-    '}';
+  
+  const cssString = ` {
+    --mat-toolbar-container-text-color: ${mdDark};
+    --mat-tab-header-active-label-text-color: ${mdDark};
+    --mat-tab-header-inactive-label-text-color: ${mdDark};
+    --mat-tab-header-pagination-icon-color: ${mdDark};
+    --mat-tab-header-pagination-disabled-icon-color: ${mdDarkDisabled2};
+    --mat-table-header-headline-color: ${mdDarkSecondary};
+    --mat-table-row-item-label-text-color: ${mdDark};
+    --mat-icon-color: ${mdDarkSecondary};
+    --mdc-icon-button-disabled-icon-color: ${mdDarkDisabled};
+    --mat-divider-color: ${mdDarkDivider};
+    --mat-paginator-container-text-color: ${mdDarkSecondary};
+    --mdc-icon-button-icon-color: ${mdDarkSecondary};
+    --mat-paginator-enabled-icon-color: ${mdDarkSecondary};
+    --mat-paginator-disabled-icon-color: ${mdDarkDisabled};
+    --mat-select-enabled-trigger-text-color: ${mdDarkSecondary};
+    --mat-select-disabled-trigger-text-color: ${mdDarkDisabled};
+    --mat-table-row-item-outline-color: ${mdDarkDivider};
+    --mdc-checkbox-unselected-focus-icon-color: ${mdDarkSecondary};
+
+    --tb-orig-background-color: ${origBackgroundColor};
+    --tb-current-entity-color: ${currentEntityColor};
+    --tb-current-entity-sticky-color: ${currentEntityStickyColor};
+    --tb-hover-color: ${hoverColor};
+    --tb-hover-sticky-color: ${hoverStickyColor};
+    --tb-selected-color: ${selectedColor};
+    --tb-selected-sticky-color: ${selectedStickyColor};
+  }
+  `;
   return cssString;
 }
 
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/table-widget.scss b/ui-ngx/src/app/modules/home/components/widget/lib/table-widget.scss
index 3df2c7d0a2..dd8a026db4 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/table-widget.scss
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/table-widget.scss
@@ -44,7 +44,53 @@
         padding: 0 5px;
       }
     }
+
+    .mat-mdc-tab-header-pagination-disabled .mat-mdc-tab-header-pagination-chevron {
+      border-color: var(--mat-tab-header-pagination-disabled-icon-color);
+    }
+  }
+
+  .mat-mdc-input-element::placeholder {
+    color: var(--mat-table-header-headline-color);
   }
+
+  .mat-mdc-table {
+    .mat-mdc-header-row {
+      background-color: var(--tb-orig-background-color);
+    }
+
+    .mat-mdc-cell, .mat-mdc-header-cell {
+      &.mat-mdc-table-sticky {
+        background-color:var(--tb-orig-background-color);
+      }
+    }
+
+    .mat-mdc-row {
+      background-color: rgba(0,0,0,0); 
+      &.tb-current-entity {
+        background-color: var(--tb-current-entity-color);
+        .mat-mdc-cell.mat-mdc-table-sticky {
+          background-color: var(--tb-current-entity-sticky-color);
+        }
+      }
+      &:hover:not(.tb-current-entity){
+        background-color: var(--tb-hover-color);
+        .mat-mdc-cell.mat-mdc-table-sticky {
+          background-color: var(--tb-hover-sticky-color);
+        }
+      }
+      &.mat-row-select.mat-selected:not(.tb-current-entity){
+        background-color: var(--tb-selected-color);
+        .mat-mdc-cell.mat-mdc-table-sticky {
+          background-color: var(--tb-selected-sticky-color);
+        }
+      }
+      &, .mat-mdc-cell.mat-mdc-table-sticky {
+        transition: background-color .2s;
+        background-color:var(--tb-orig-background-color);
+      }
+    }
+  } 
 }
 
 :host-context(.tb-has-timewindow) {
diff --git a/ui-ngx/src/styles.scss b/ui-ngx/src/styles.scss
index 6d49e9f698..66006ec701 100644
--- a/ui-ngx/src/styles.scss
+++ b/ui-ngx/src/styles.scss
@@ -692,7 +692,7 @@ pre.tb-highlight {
   mat-toolbar.mat-mdc-table-toolbar:not(.mat-primary), .mat-mdc-cell, .mat-expansion-panel-header, mat-card-header.mat-mdc-card-header {
     button.mat-mdc-icon-button {
       .mat-icon {
-        color: rgba(0, 0, 0, .54);
+        color:var(--mat-icon-color, rgba(0, 0, 0, .54));
       }
       &[disabled][disabled] {
         .mat-icon {
@@ -760,11 +760,11 @@ pre.tb-highlight {
       transition: background-color .2s;
 
       &:hover:not(.tb-current-entity) {
-        background-color: #f4f4f4;
+        background-color: var(--tb-hover-color, #f4f4f4);
       }
 
       &.tb-current-entity {
-        background-color: #e9e9e9;
+        background-color: var(--tb-current-entity-color, #e9e9e9);
       }
 
       &.tb-pointer {
@@ -816,7 +816,7 @@ pre.tb-highlight {
     vertical-align: middle;
     border-width: 0;
     border-bottom-width: 1px;
-    border-bottom-color: rgba(0, 0, 0, 0.12);
+    border-bottom-color: var(--mat-table-row-item-outline-color,rgba(0, 0, 0, 0.12));
     border-style: solid;
     text-overflow: ellipsis;
     touch-action: auto !important;