fix: make native date/time picker icons visible in dark mode (#27275)

src/lib/components/admin/Analytics/Dashboard.svelte

@@ -251,14 +251,14 @@
 				type="date"
 				bind:value={customStart}
 				max={customEnd || undefined}
-				class="w-fit rounded-sm px-2 text-xs bg-transparent outline-none"
+				class="w-fit rounded-sm px-2 text-xs bg-transparent outline-none dark:scheme-dark"
 			/>
 			<span class="text-xs text-gray-400">–</span>
 			<input
 				type="date"
 				bind:value={customEnd}
 				min={customStart || undefined}
-				class="w-fit rounded-sm px-2 text-xs bg-transparent outline-none"
+				class="w-fit rounded-sm px-2 text-xs bg-transparent outline-none dark:scheme-dark"
 			/>
 		{/if}
 		<select

src/lib/components/automations/ScheduleDropdown.svelte

@@ -230,7 +230,7 @@
 							type="date"
 							bind:value={onceDate}
 							min={new Date().toISOString().split('T')[0]}
-							class="bg-transparent outline-hidden text-xs dark:color-scheme-dark"
+							class="bg-transparent outline-hidden text-xs dark:scheme-dark"
 							on:click={(e) => e.stopPropagation()}
 							on:input={onChange}
 						/>
@@ -239,7 +239,7 @@
 						<input
 							type="time"
 							bind:value={onceTime}
-							class="bg-transparent outline-hidden text-xs dark:color-scheme-dark"
+							class="bg-transparent outline-hidden text-xs dark:scheme-dark"
 							on:click={(e) => e.stopPropagation()}
 							on:input={onChange}
 						/>
@@ -256,7 +256,7 @@
 								minute = m;
 								onChange();
 							}}
-							class="bg-transparent text-center outline-hidden text-xs dark:color-scheme-dark"
+							class="bg-transparent text-center outline-hidden text-xs dark:scheme-dark"
 							on:click={(e) => e.stopPropagation()}
 						/>
 					</div>

src/lib/components/calendar/CalendarEventModal.svelte

@@ -214,11 +214,11 @@
 			<div>
 				<div class="mb-1 text-xs text-gray-500">{$i18n.t('When')}</div>
 				<div class="flex items-center gap-2 text-sm flex-wrap">
-					<input type="date" class="bg-transparent outline-hidden" bind:value={startDate} />
+					<input type="date" class="bg-transparent outline-hidden dark:scheme-dark" bind:value={startDate} />
 					{#if !allDay}
-						<input type="time" class="bg-transparent outline-hidden" bind:value={startTime} />
+						<input type="time" class="bg-transparent outline-hidden dark:scheme-dark" bind:value={startTime} />
 						<span class="text-gray-300 dark:text-gray-600">–</span>
-						<input type="time" class="bg-transparent outline-hidden" bind:value={endTime} />
+						<input type="time" class="bg-transparent outline-hidden dark:scheme-dark" bind:value={endTime} />
 					{/if}
 					<label class="flex items-center gap-1.5 cursor-pointer text-xs text-gray-400 ml-auto">
 						<input type="checkbox" class="accent-blue-500" bind:checked={allDay} />

src/lib/components/chat/MessageInput/InputVariablesModal.svelte

@@ -175,7 +175,7 @@
 												{:else if variables[variable]?.type === 'date'}
 													<input
 														type="date"
-														class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-hidden border border-gray-100/30 dark:border-gray-850/30"
+														class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-hidden border border-gray-100/30 dark:border-gray-850/30 dark:scheme-dark"
 														placeholder={variables[variable]?.placeholder ?? ''}
 														bind:value={variableValues[variable]}
 														autocomplete="off"
@@ -186,7 +186,7 @@
 												{:else if variables[variable]?.type === 'datetime-local'}
 													<input
 														type="datetime-local"
-														class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-hidden border border-gray-100/30 dark:border-gray-850/30"
+														class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-hidden border border-gray-100/30 dark:border-gray-850/30 dark:scheme-dark"
 														placeholder={variables[variable]?.placeholder ?? ''}
 														bind:value={variableValues[variable]}
 														autocomplete="off"
@@ -208,7 +208,7 @@
 												{:else if variables[variable]?.type === 'month'}
 													<input
 														type="month"
-														class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-hidden border border-gray-100/30 dark:border-gray-850/30"
+														class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-hidden border border-gray-100/30 dark:border-gray-850/30 dark:scheme-dark"
 														placeholder={variables[variable]?.placeholder ?? ''}
 														bind:value={variableValues[variable]}
 														autocomplete="off"
@@ -283,7 +283,7 @@
 												{:else if variables[variable]?.type === 'time'}
 													<input
 														type="time"
-														class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-hidden border border-gray-100/30 dark:border-gray-850/30"
+														class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-hidden border border-gray-100/30 dark:border-gray-850/30 dark:scheme-dark"
 														placeholder={variables[variable]?.placeholder ?? ''}
 														bind:value={variableValues[variable]}
 														autocomplete="off"

src/lib/components/chat/Settings/Account.svelte

@@ -197,7 +197,7 @@
 				description={$i18n.t('Set the birth date saved with your profile.')}
 			>
 				<input
-					class={inputClass}
+					class="{inputClass} dark:scheme-dark"
 					type="date"
 					aria-label={$i18n.t('Birth Date')}
 					bind:value={dateOfBirth}