diff --git a/src/layouts/partial-cards.js b/src/layouts/partial-cards.js
index b3e5e0bff8..362d468c72 100644
--- a/src/layouts/partial-cards.js
+++ b/src/layouts/partial-cards.js
@@ -48,7 +48,7 @@ import EventsMixin from '../mixins/events-mixin.js';
 
       paper-tabs {
         margin-left: 12px;
-        --paper-tabs-selection-bar-color: #FFF;
+        --paper-tabs-selection-bar-color: var(--text-primary-color, #FFF);
         text-transform: uppercase;
       }
     </style>
diff --git a/src/resources/ha-style.js b/src/resources/ha-style.js
index 2248c62efc..3666d6960e 100644
--- a/src/resources/ha-style.js
+++ b/src/resources/ha-style.js
@@ -151,7 +151,7 @@ documentContainer.innerHTML = `<custom-style>
       app-header, app-toolbar {
         background-color: var(--primary-color);
         font-weight: 400;
-        color: white;
+        color: var(--text-primary-color, white);
       }
 
       app-toolbar ha-menu-button + [main-title],