diff --git a/src/components/device/ha-device-picker.ts b/src/components/device/ha-device-picker.ts
index 10ebaecb07..d7e0c15073 100644
--- a/src/components/device/ha-device-picker.ts
+++ b/src/components/device/ha-device-picker.ts
@@ -1,7 +1,7 @@
 import "@polymer/paper-input/paper-input";
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-item/paper-item-body";
-import "@vaadin/vaadin-combo-box/vaadin-combo-box-light";
+import "@vaadin/vaadin-combo-box/theme/material/vaadin-combo-box-light";
 import "@polymer/paper-listbox/paper-listbox";
 import memoizeOne from "memoize-one";
 import {
diff --git a/src/resources/ha-date-picker-style.js b/src/resources/ha-date-picker-style.js
index c663477bd0..61d8d80b7e 100644
--- a/src/resources/ha-date-picker-style.js
+++ b/src/resources/ha-date-picker-style.js
@@ -12,12 +12,27 @@ documentContainer.innerHTML = `
       [part~="label"] {
         top: 6px;
         font-size: var(--paper-font-subhead_-_font-size);
+        color: var(--paper-input-container-color, var(--secondary-text-color));
+      }
+
+      :host([focused]) [part~="label"] {
+        color: var(--paper-input-container-focus-color, var(--primary-color));
       }
 
       [part~="input-field"] {
+        color: var(--primary-text-color);
         top: 3px;
       }
 
+      [part~="input-field"]::before, [part~="input-field"]::after {
+        background-color: var(--paper-input-container-color, var(--secondary-text-color));
+        opacity: 1;
+      }
+
+      :host([focused]) [part~="input-field"]::before, :host([focused]) [part~="input-field"]::after {
+        background-color: var(--paper-input-container-focus-color, var(--primary-color));
+      }
+
       [part~="value"] {
         font-size: var(--paper-font-subhead_-_font-size);
       }
@@ -52,17 +67,19 @@ documentContainer.innerHTML = `
 <dom-module id="ha-date-picker-overlay-styles" theme-for="vaadin-date-picker-overlay">
   <template>
     <style include="vaadin-date-picker-overlay-default-theme">
-      :host {
-        background-color: var(--paper-card-background-color, var(--primary-background-color));
-      }
-
       [part~="toolbar"] {
         padding: 0.3em;
         background-color: var(--secondary-background-color);
       }
 
       [part="years"] {
-        background-color: var(--paper-grey-200);
+        background-color: var(--secondary-text-color);
+        --material-body-text-color: var(--primary-background-color);
+      }
+
+      [part="overlay"] {
+        background-color: var(--primary-background-color);
+        --material-body-text-color: var(--secondary-text-color);
       }
 
     </style>
@@ -76,6 +93,7 @@ documentContainer.innerHTML = `
       }
     </style>
   </template>
-</dom-module>`;
+</dom-module>
+`;
 
 document.head.appendChild(documentContainer.content);