diff --git a/src/components/data-table/ha-data-table.ts b/src/components/data-table/ha-data-table.ts
index d009bd8c77..0fa519b4d9 100644
--- a/src/components/data-table/ha-data-table.ts
+++ b/src/components/data-table/ha-data-table.ts
@@ -427,7 +427,7 @@ export class HaDataTable extends BaseElement {
       }
 
       .mdc-data-table {
-        background-color: var(--card-background-color);
+        background-color: var(--data-table-background-color);
         border-radius: 4px;
         border-width: 1px;
         border-style: solid;
diff --git a/src/resources/ha-style.ts b/src/resources/ha-style.ts
index 88b9552598..0ab68dbaa2 100644
--- a/src/resources/ha-style.ts
+++ b/src/resources/ha-style.ts
@@ -123,6 +123,9 @@ documentContainer.innerHTML = `<custom-style>
       --paper-slider-container-color: var(--slider-bar-color);
       --ha-paper-slider-pin-font-size: 15px;
 
+      /* set data table style */
+      --data-table-background-color: var(--card-background-color);
+
       /* rgb */
       --rgb-primary-color: 3, 169, 244;
       --rgb-accent-color: 255, 152, 0;