diff --git a/docs/.vitepress/theme/components/waitlist/WaitlistSurvey.vue b/docs/.vitepress/theme/components/waitlist/WaitlistSurvey.vue
index 7f4ae7b8d..f1f6238f3 100644
--- a/docs/.vitepress/theme/components/waitlist/WaitlistSurvey.vue
+++ b/docs/.vitepress/theme/components/waitlist/WaitlistSurvey.vue
@@ -37,7 +37,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <Card class="waitlist-card">
+  <Card class="waitlist-card survey-card">
     <iframe
       :data-tally-src="product.survey.embedSrc"
       loading="lazy"
@@ -50,3 +50,10 @@ onMounted(() => {
     />
   </Card>
 </template>
+
+<style scoped>
+/* The Tally form has dark text on a transparent background, so it needs a light card in dark mode. */
+html.dark div.waitlist-card.survey-card.card {
+  background-color: #fff;
+}
+</style>
diff --git a/docs/.vitepress/theme/style.css b/docs/.vitepress/theme/style.css
index 919ecb1dc..9b8b43389 100644
--- a/docs/.vitepress/theme/style.css
+++ b/docs/.vitepress/theme/style.css
@@ -252,11 +252,11 @@ html::-webkit-scrollbar-thumb:active {
   margin-left: 2px;
   padding: 0 5px;
   border-radius: 4px;
-  background-color: var(--vp-c-bg-alt);
+  background-color: color-mix(in srgb, var(--vp-c-indigo-1) 10%, transparent);
   font-size: 10px;
   line-height: 16px;
   font-weight: 600;
-  color: var(--vp-c-text-1);
+  color: var(--vp-c-indigo-2);
   vertical-align: 1px;
 }