#1781 Update background, text and placeholder colors for form elements for better contrast and readability

Author: zxyctn

src/app.postcss

@@ -12,3 +12,16 @@ body {
 [type='text']:focus {
 	--tw-ring-color: #00000;
 }
+
+.svelte-select, .svelte-select-list {
+	@apply dark:!bg-zinc-700 border dark:!border-zinc-500;
+}
+
+.multi-item {
+	@apply dark:!bg-zinc-500 dark:!outline-zinc-400;
+}
+
+.list-item .item.hover:not(.active):not(.list-group-title) {
+	@apply dark:!text-black;
+}
+

src/lib/components/form/Checkbox.svelte

@@ -14,7 +14,7 @@
 <InputContainer {label} {feedback} {required}>
 	<input
 		{id}
-		class="input variant-form-material"
+		class="input variant-form-material bg-zinc-50 dark:bg-zinc-50"
 		type="checkbox"
 		class:input-success={valid}
 		class:input-error={invalid}

src/lib/components/form/DateInput.svelte

@@ -15,7 +15,7 @@
 <InputContainer {id} {label} {feedback} {required} {help}>
 	<input
 		{id}
-		class="input variant-form-material"
+		class="input variant-form-material bg-zinc-50 dark:bg-zinc-700 placeholder:text-gray-400"
 		type="date"
 		class:input-success={valid}
 		class:input-error={invalid}

src/lib/components/form/DropdownKvP.svelte

@@ -39,7 +39,7 @@
 <InputContainer {id} label={title} {feedback} {required} {help}>
 	<select
 		{id}
-		class="select variant-form-material"
+		class="select variant-form-material dark:bg-zinc-700 bg-zinc-50 placeholder:text-gray-400"
 		class:input-success={valid}
 		class:input-error={invalid}
 		bind:value={selected}

src/lib/components/form/NumberInput.svelte

@@ -18,7 +18,7 @@
 <InputContainer {id} {label} {feedback} {required} {help}>
 	<input
 		{id}
-		class="input variant-form-material"
+		class="input variant-form-material dark:bg-zinc-700 bg-zinc-50 placeholder:text-gray-400"
 		type="number"
 		class:input-success={valid}
 		class:input-error={invalid}

src/lib/components/form/TextArea.svelte

@@ -17,7 +17,7 @@
 <InputContainer {id} {label} {feedback} {required} {help}>
 	<textarea
 		{id}
-		class="textarea variant-form-material"
+		class="textarea variant-form-material dark:bg-zinc-700 bg-zinc-50 placeholder:text-gray-400"
 		class:input-success={valid}
 		class:input-error={invalid}
 		bind:value

src/lib/components/form/TextInput.svelte

@@ -16,7 +16,7 @@
 <InputContainer {id} {label} {feedback} {required} {help}>
 	<input
 		{id}
-		class="input variant-form-material"
+		class="input variant-form-material dark:bg-zinc-700 bg-zinc-50 placeholder:text-gray-400"
 		type="text"
 		class:input-success={valid}
 		class:input-error={invalid}