Light mode better styles

Author: PiterWeb

frontend/src/lib/layout/icons/DeleteIcon.svelte

@@ -8,6 +8,6 @@
 	stroke-width="2"
 	stroke-linecap="round"
 	stroke-linejoin="round"
-	class="hover:stroke-red-500 hover:scale-110 transition-transform"
+	class="hover:stroke-red-500 hover:scale-110 transition-transform dark:stroke-white stroke-gray-900"
 	><circle cx="12" cy="12" r="10" /><path d="m15 9-6 6" /><path d="m9 9 6 6" /></svg
 >

frontend/src/lib/layout/icons/PencilIcon.svelte

@@ -8,6 +8,6 @@
 	stroke-width="2"
 	stroke-linecap="round"
 	stroke-linejoin="round"
-	class="lucide lucide-pencil"
+	class="lucide lucide-pencil dark:stroke-white stroke-gray-900"
 	><path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z" /><path d="m15 5 4 4" /></svg
 >

frontend/src/lib/layout/icons/TrashIcon.svelte

@@ -8,7 +8,7 @@
 	stroke-width="2"
 	stroke-linecap="round"
 	stroke-linejoin="round"
-	class="hover:stroke-red-500 hover:scale-110 transition-transform"
+	class="hover:stroke-red-500 hover:scale-110 transition-transform dark:stroke-white stroke-gray-900"
 	><path d="M3 6h18" /><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6" /><path
 		d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"
 	/><line x1="10" x2="10" y1="11" y2="17" /><line x1="14" x2="14" y1="11" y2="17" /></svg

frontend/src/lib/webrtc/ICEServerManager.svelte

@@ -136,9 +136,9 @@
 			e.preventDefault()
 			groupToCreate = '';
 		}}
-		class="flex flex-col gap-4 items-center justify-center sm:w-[30vw] w-[75vw] p-4 my-4 border rounded-lg shadow sm:p-6 bg-gray-800 border-gray-700"
+		class="flex flex-col gap-4 items-center justify-center sm:w-[30vw] w-[75vw] p-4 my-4 bg-white border border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700"
 	>
-		<label for="group" class="block mb-2 font-medium text-gray-900 dark:text-white"
+		<label for="group" class="block mb-2 font-medium  text-gray-900 dark:text-white"
 			>{$_('create_group')}</label
 		>
 		<input
@@ -163,7 +163,7 @@
 			</p>
 		{/if}
 		{#each Object.keys($servers) as server_group, i}
-			<li class="w-[75vw] p-4 my-4 border rounded-lg shadow sm:p-6 bg-gray-800 border-gray-700">
+			<li class="w-[75vw] p-4 my-4 border rounded-lg shadow sm:p-6 bg-white border-gray-200 dark:bg-gray-800 dark:border-gray-700">
 				<div class="flex justify-end h-0 mb-4 lg:mb-1">
 					<button
 						type="button"
@@ -204,7 +204,7 @@
 							newserverToAdd = '';
 						}}
 					>
-						<label for="domain" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
+						<label for="domain" class="block mb-2 text-sm font-medium text-gray-400 dark:text-white"
 							>{$_('new_server')}</label
 						>
 						<input
@@ -239,7 +239,7 @@
 							<li class="pb-3 sm:pb-4">
 								<div class="flex items-center space-x-4 rtl:space-x-reverse">
 									<div class="flex-1 min-w-0">
-										<p class="text-lg truncate text-white">
+										<p class="text-lg truncate text-gray-400 dark:text-white">
 											{#if type === 'stun'}
 												{server.split('stun:')[1]}
 											{:else}
@@ -262,7 +262,7 @@
 						<form action="">
 							<label
 								for="user-{i}"
-								class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
+								class="block mb-2 text-sm font-medium text-gray-400 dark:text-white"
 								>{$_('username')}</label
 							>
 							<input
@@ -277,7 +277,7 @@
 
 							<label
 								for="password"
-								class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
+								class="block mb-2 text-sm font-medium text-gray-400 dark:text-white"
 								>{$_('password')}</label
 							>
 

frontend/src/routes/+page.svelte

@@ -32,7 +32,7 @@
 			class="card md:w-96 md:h-52 bg-white border border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700"
 		>
 			<div class="card-body">
-				<h2 class="card-title text-white">{$_('host_card_title')}</h2>
+				<h2 class="card-title dark:text-white text-gray-800">{$_('host_card_title')}</h2>
 				<p class="text-gray-400">{$_('host_card_description')}</p>
 				<a href="/mode/host" class="btn btn-primary text-white">{$_('host_card_cta')}</a>
 			</div>
@@ -42,7 +42,7 @@
 		class="card md:w-96 md:h-52 bg-white border border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700"
 	>
 		<div class="card-body">
-			<h2 class="card-title text-white">{$_('client_card_title')}</h2>
+			<h2 class="card-title dark:text-white text-gray-800">{$_('client_card_title')}</h2>
 			<p class="text-gray-400">{$_('client_card_description')}</p>
 			<a href="/mode/client" class="btn btn-primary text-white">{$_('client_card_cta')}</a>
 		</div>