Migrating frontend to dark-mode as website (not completed)

PiterWeb · PiterWeb · commit c91dc912f519 · 2025-06-20T02:23:39.000+02:00
diff --git a/frontend/src/app.css b/frontend/src/app.css
@@ -1,3 +1,7 @@
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
+@tailwind utilities;
+
+body {
+    @apply bg-gray-900
+}
diff --git a/frontend/src/lib/i18n/LanguageSelector.svelte b/frontend/src/lib/i18n/LanguageSelector.svelte
@@ -14,9 +14,9 @@
 <section
 	id="tutorial-language"
 	class="
-    min-w-full p-4 bg-white border border-gray-200 rounded-lg shadow sm:p-6 md:p-8 dark:bg-gray-800 dark:border-gray-700"
+    min-w-full p-4 bg-white border border-gray-200 rounded-lg shadow sm:p-6 md:p-8"
 >
-	<label for="helper-text" class="text-xl font-medium text-gray-900 dark:text-white"
+	<label for="helper-text" class="text-xl font-medium text-gray-900"
 		>{$_('language-selector-title')}</label
 	>
 
diff --git a/frontend/src/lib/layout/icons/DeleteIcon.svelte b/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 dark:stroke-white stroke-gray-900"
+	class="hover:stroke-red-500 hover:scale-110 transition-transform stroke-gray-900"
 	><circle cx="12" cy="12" r="10" /><path d="m15 9-6 6" /><path d="m9 9 6 6" /></svg
 >
diff --git a/frontend/src/lib/layout/icons/PencilIcon.svelte b/frontend/src/lib/layout/icons/PencilIcon.svelte
@@ -8,6 +8,6 @@
 	stroke-width="2"
 	stroke-linecap="round"
 	stroke-linejoin="round"
-	class="lucide lucide-pencil dark:stroke-white stroke-gray-900"
+	class="lucide lucide-pencil 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
 >
diff --git a/frontend/src/lib/layout/icons/TrashIcon.svelte b/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 dark:stroke-white stroke-gray-900"
+	class="hover:stroke-red-500 hover:scale-110 transition-transform 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
diff --git a/frontend/src/lib/webrtc/ICEServerManager.svelte b/frontend/src/lib/webrtc/ICEServerManager.svelte
@@ -102,16 +102,12 @@
 	let newserverToAdd: string | undefined = $state();
 </script>
 
-<h2 class="text-center text-[clamp(2rem,6vw,4.2rem)] font-black leading-[1.1] xl:text-left">
-	<span
-		class="[&amp;::selection]:text-base-content text-transparent relative col-start-1 row-start-1 bg-clip-text bg-gradient-to-r from-blue-700 via-blue-800 to-gray-900"
-	>
-		{#if type === 'stun'}
-			{$_('stun-servers-title')}
-		{:else}
-			{$_('turn-servers-title')}
-		{/if}
-	</span>
+<h2 class="text-center text-primary text-[clamp(2rem,6vw,4.2rem)] font-black leading-[1.1] xl:text-left">
+	{#if type === 'stun'}
+		{$_('stun-servers-title')}
+	{:else}
+		{$_('turn-servers-title')}
+	{/if}
 </h2>
 
 <section>
@@ -137,15 +133,15 @@
 			e.preventDefault()
 			groupToCreate = '';
 		}}
-		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"
+		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"
 	>
-		<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"
 			>{$_('create_group')}</label
 		>
 		<input
 			type="text"
 			id="group"
-			class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+			class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
 			placeholder="Group"
 			required
 			bind:value={groupToCreate}
@@ -164,7 +160,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-white border-gray-200 dark:bg-gray-800 dark:border-gray-700">
+			<li class="w-[75vw] p-4 my-4 border rounded-lg shadow sm:p-6 bg-white border-gray-200">
 				<div class="flex justify-end h-0 mb-4 lg:mb-1">
 					<button
 						type="button"
@@ -187,7 +183,7 @@
 					</button>
 
 					<h4
-						class="w-11/12 text-lg font-medium text-gray-900 dark:text-white mb-2 focus"
+						class="w-11/12 text-lg font-medium text-gray-900 mb-2 focus"
 						contenteditable="false"
 						id="group-{server_group}-{i}"
 						oninput={(e) =>
@@ -205,13 +201,13 @@
 							newserverToAdd = '';
 						}}
 					>
-						<label for="domain" class="block mb-2 text-sm font-medium text-gray-400 dark:text-white"
+						<label for="domain" class="block mb-2 text-sm font-medium text-gray-600"
 							>{$_('new_server')}</label
 						>
 						<input
 							type="text"
 							id="domain"
-							class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg mb-2 focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+							class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg mb-2 focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
 							placeholder="domain:port // ip:port"
 							required
 							bind:value={newserverToAdd}
@@ -240,7 +236,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-gray-400 dark:text-white">
+										<p class="text-lg truncate text-gray-400">
 											{#if type === 'stun'}
 												{server.split('stun:')[1]}
 											{:else}
@@ -250,7 +246,7 @@
 									</div>
 									<button
 										onclick={() => removeServerFromGroup(server_group, server)}
-										class="h-5 w-5 mx-10 text-gray-400 cursor-pointer"
+										class="h-5 w-5 mx-10 text-gray-600 cursor-pointer"
 									>
 										<TrashIcon />
 									</button>
@@ -263,13 +259,13 @@
 						<form action="">
 							<label
 								for="user-{i}"
-								class="block mb-2 text-sm font-medium text-gray-400 dark:text-white"
+								class="block mb-2 text-sm font-medium text-gray-600"
 								>{$_('username')}</label
 							>
 							<input
 								type="text"
 								id="user-{i}"
-								class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+								class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
 								placeholder="username"
 								required
 								value={$servers[server_group]?.username ?? ''}
@@ -278,14 +274,14 @@
 
 							<label
 								for="password"
-								class="block mb-2 text-sm font-medium text-gray-400 dark:text-white"
+								class="block mb-2 text-sm font-medium text-gray-600"
 								>{$_('password')}</label
 							>
 
 							<input
 								type="password"
 								id="password"
-								class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+								class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
 								placeholder="•••••••••"
 								required
 								value={$servers[server_group]?.credential ?? ''}
diff --git a/frontend/src/routes/+layout.svelte b/frontend/src/routes/+layout.svelte
@@ -71,7 +71,7 @@
 </Tooltip>
 
 <PageTransition key={page.url.toString()} duration={750}>
-	<div class="hero min-h-[calc(100vh-4rem)] bg-base-200">
+	<div class="hero min-h-[calc(100vh-4rem)] bg-gray-900">
 		<div class="hero-content flex-col">
 			{@render children?.()}
 		</div>
diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte
@@ -14,36 +14,35 @@
 	{$_('tutorial_btn')}
 </button>
 
-<h2 class="text-center text-[clamp(2rem,6vw,4.2rem)] font-black leading-[1.1] xl:text-left">
+<h2 class="text-center text-white text-[clamp(2rem,6vw,4.2rem)] font-black leading-[1.1] xl:text-left">
 	<span
-		class="[&amp;::selection]:text-base-content text-transparent relative col-start-1 row-start-1 bg-clip-text bg-gradient-to-r from-blue-700 via-blue-800 to-gray-900"
+		class="text-primary"
 		>{$_('main_title_choose')}
 	</span>
 	{$_('main_title_your')}
-
 	<span
-		class="[&amp;::selection]:text-base-content text-transparent relative col-start-1 row-start-1 bg-clip-text bg-gradient-to-r from-blue-700 via-blue-800 to-gray-900"
+		class="text-primary"
 		>{$_('main_title_role')}</span
 	>
 </h2>
 <div id="tutorial-play" class="flex gap-4 mt-4 md:flex-row flex-col">
 	{#if !onwebsite}
 		<div
-			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"
+			class="card md:w-96 md:h-52 bg-white rounded-lg shadow border-gray-200 border"
 		>
 			<div class="card-body">
-				<h2 class="card-title dark:text-white text-gray-800">{$_('host_card_title')}</h2>
-				<p class="text-gray-400">{$_('host_card_description')}</p>
+				<h2 class="card-title text-gray-800">{$_('host_card_title')}</h2>
+				<p class="text-gray-600">{$_('host_card_description')}</p>
 				<a href="/mode/host" class="btn btn-primary text-white">{$_('host_card_cta')}</a>
 			</div>
 		</div>
 	{/if}
 	<div
-		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"
+		class="card md:w-96 md:h-52 bg-white border border-gray-200 rounded-lg shadow"
 	>
 		<div class="card-body">
-			<h2 class="card-title dark:text-white text-gray-800">{$_('client_card_title')}</h2>
-			<p class="text-gray-400">{$_('client_card_description')}</p>
+			<h2 class="card-title text-gray-800">{$_('client_card_title')}</h2>
+			<p class="text-gray-600">{$_('client_card_description')}</p>
 			<a href="/mode/client" class="btn btn-primary text-white">{$_('client_card_cta')}</a>
 		</div>
 	</div>
diff --git a/frontend/src/routes/mode/client/+page.svelte b/frontend/src/routes/mode/client/+page.svelte
@@ -36,11 +36,8 @@
 	}
 </script>
 
-<h2 class="text-center text-[clamp(2rem,6vw,4.2rem)] font-black leading-[1.1] xl:text-left">
-	<span
-		class="[&amp;::selection]:text-base-content text-transparent relative col-start-1 row-start-1 bg-clip-text bg-gradient-to-r from-blue-700 via-blue-800 to-gray-900"
-		>{$_('client_card_title')}
-	</span>
+<h2 class="text-center text-primary text-[clamp(2rem,6vw,4.2rem)] font-black leading-[1.1] xl:text-left">
+		{$_('client_card_title')}
 </h2>
 
 <div
diff --git a/frontend/src/routes/mode/config/+page.svelte b/frontend/src/routes/mode/config/+page.svelte
@@ -7,11 +7,8 @@
 	import TurnServers from './TurnServers.svelte';
 </script>
 
-<h2 class="text-center text-[clamp(2rem,6vw,4.2rem)] font-black leading-[1.1] xl:text-left">
-	<span
-		class="[&amp;::selection]:text-base-content text-transparent relative col-start-1 row-start-1 bg-clip-text bg-gradient-to-r from-blue-700 via-blue-800 to-gray-900"
-		>{$_('config_title')}
-	</span>
+<h2 class="text-center text-primary text-[clamp(2rem,6vw,4.2rem)] font-black leading-[1.1] xl:text-left">
+		{$_('config_title')}
 </h2>
 
 <div class="grid gap-28 w-full md:grid-cols-3 py-12 xl:[&>*]:w-80 lg:[&>*]:w-72 md:[&>*]:w-60 [&>*]:w-72">
diff --git a/frontend/src/routes/mode/config/StunServers.svelte b/frontend/src/routes/mode/config/StunServers.svelte
@@ -4,13 +4,13 @@
 
 <section
 	id="tutorial-stun-card"
-	class="min-w-full p-4 bg-white border border-gray-200 rounded-lg shadow sm:p-6 md:p-8 dark:bg-gray-800 dark:border-gray-700"
+	class="min-w-full p-4 bg-white border border-gray-200 rounded-lg shadow sm:p-6 md:p-8"
 >
 	<form class="max-w-lg mx-auto space-y-6" method="GET" action="/mode/config/advanced/stun">
-		<label for="helper-text" class="text-xl font-medium text-gray-900 dark:text-white"
+		<label for="helper-text" class="text-xl font-medium text-gray-900"
 			>{$_('stun-servers-title')}</label
 		>
-		<span class="text-sm text-gray-300">
+		<span class="text-sm text-gray-600">
 			{$_('advance')}
 		</span>
 		<br />
diff --git a/frontend/src/routes/mode/config/TurnServers.svelte b/frontend/src/routes/mode/config/TurnServers.svelte
@@ -4,13 +4,13 @@
 
 <section
 	id="tutorial-turn-card"
-	class="min-w-full p-4 bg-white border border-gray-200 rounded-lg shadow sm:p-6 md:p-8 dark:bg-gray-800 dark:border-gray-700"
+	class="min-w-full p-4 bg-white border border-gray-200 rounded-lg shadow sm:p-6 md:p-8"
 >
 	<form class="max-w-lg mx-auto space-y-6" method="get" action="/mode/config/advanced/turn">
-		<label for="helper-text" class="text-xl font-medium text-gray-900 dark:text-white"
+		<label for="helper-text" class="text-xl font-medium text-gray-900"
 			>{$_('turn-servers-title')}</label
 		>
-		<span class="text-sm text-gray-300">
+		<span class="text-sm text-gray-600">
 			{$_('advance')}
 		</span>
 
diff --git a/frontend/src/routes/mode/config/ViGEmDownload.svelte b/frontend/src/routes/mode/config/ViGEmDownload.svelte
@@ -5,16 +5,16 @@
 </script>
 
 <section
-	class="max-w-sm p-6 bg-white border border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700"
+	class="max-w-sm p-6 bg-white border border-gray-200 rounded-lg shadow"
 >
-	<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
+	<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900">
 		ViGEmBus Driver
 	</h5>
 
-	<p class="mb-3 font-normal text-gray-700 dark:text-gray-400">
+	<p class="mb-3 font-normal text-gray-700">
 		You need to have installed to use the Host mode.
 	</p>
-	<p class="mb-3 font-normal text-gray-700 dark:text-gray-400">
+	<p class="mb-3 font-normal text-gray-700">
 		If you already have it installed, ignore this, but if you skipped the installation, you can
 		install it here.
 	</p>
diff --git a/frontend/src/routes/mode/host/+page.svelte b/frontend/src/routes/mode/host/+page.svelte
@@ -35,11 +35,8 @@
 	}
 </script>
 
-<h2 class="text-center text-[clamp(2rem,6vw,4.2rem)] font-black leading-[1.1] xl:text-left">
-	<span
-		class="[&amp;::selection]:text-base-content text-transparent relative col-start-1 row-start-1 bg-clip-text bg-gradient-to-r from-blue-700 via-blue-800 to-gray-900"
-		>{$_('host_card_title')}
-	</span>
+<h2 class="text-center text-primary text-[clamp(2rem,6vw,4.2rem)] font-black leading-[1.1] xl:text-left">
+		{$_('host_card_title')}
 </h2>
 
 <div

Original file line number	Diff line number	Diff line change
`@@ -14,9 +14,9 @@`
`14`	`14`	`<section`
`15`	`15`	`id="tutorial-language"`
`16`	`16`	`class="`
`17`		`- min-w-full p-4 bg-white border border-gray-200 rounded-lg shadow sm:p-6 md:p-8 dark:bg-gray-800 dark:border-gray-700"`
	`17`	`+ min-w-full p-4 bg-white border border-gray-200 rounded-lg shadow sm:p-6 md:p-8"`
`18`	`18`	`>`
`19`		`- <label for="helper-text" class="text-xl font-medium text-gray-900 dark:text-white"`
	`19`	`+ <label for="helper-text" class="text-xl font-medium text-gray-900"`
`20`	`20`	`>{$_('language-selector-title')}</label`
`21`	`21`	`>`
`22`	`22`
Original file line number	Diff line number	Diff line change
`@@ -8,6 +8,6 @@`
`8`	`8`	`stroke-width="2"`
`9`	`9`	`stroke-linecap="round"`
`10`	`10`	`stroke-linejoin="round"`
`11`		`- class="hover:stroke-red-500 hover:scale-110 transition-transform dark:stroke-white stroke-gray-900"`
	`11`	`+ class="hover:stroke-red-500 hover:scale-110 transition-transform stroke-gray-900"`
`12`	`12`	`><circle cx="12" cy="12" r="10" /><path d="m15 9-6 6" /><path d="m9 9 6 6" /></svg`
`13`	`13`	`>`