diff --git a/src/html/onboarding.html.template b/src/html/onboarding.html.template
index 8ab6264be1..cce2b81e57 100644
--- a/src/html/onboarding.html.template
+++ b/src/html/onboarding.html.template
@@ -2,7 +2,11 @@
 <html>
   <head>
     <title>Home Assistant</title>
-    <link rel="modulepreload" href="<%= latestPageJS %>" crossorigin="use-credentials" />
+    <link
+      rel="modulepreload"
+      href="<%= latestPageJS %>"
+      crossorigin="use-credentials"
+    />
     <%= renderTemplate('_header') %>
     <style>
       html {
@@ -15,8 +19,19 @@
         border-radius: 4px;
         max-width: 432px;
         margin: 64px auto 0;
-        box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
-        background-color: #fff;
+        box-shadow: var(
+          --ha-card-box-shadow,
+          rgba(0, 0, 0, 0.25) 0px 54px 55px,
+          rgba(0, 0, 0, 0.12) 0px -12px 30px,
+          rgba(0, 0, 0, 0.12) 0px 4px 6px,
+          rgba(0, 0, 0, 0.17) 0px 12px 13px,
+          rgba(0, 0, 0, 0.09) 0px -3px 5px
+        );
+        background: var(
+          --ha-card-background,
+          var(--card-background-color, white)
+        );
+        color: var(--primary-text-color, #212121);
       }
 
       .header {
@@ -34,7 +49,6 @@
 
       @media (prefers-color-scheme: dark) {
         html {
-          background-color: #111111;
           color: #e1e1e1;
         }
       }
@@ -45,10 +59,9 @@
           margin: 0;
         }
       }
-
     </style>
   </head>
-  <body id='particles'>
+  <body id="particles">
     <div class="content">
       <div class="header">
         <img src="/static/icons/favicon-192x192.png" height="52" width="52" />
