Merge pull request #30 from bherbst/dark_fixes

Dark & light mode color fixes

Author: 333fred

ui/src/app.css

@@ -14,6 +14,9 @@
 	--color-neutral-950: #0a0a0a;
 }
 
+/* Allow setting dark mode manually instead of just relying on prefers-color-scheme */
+@custom-variant dark (&:where(.dark, .dark *));
+
 html {
 	font-feature-settings: normal;
 	font-variation-settings: normal;

ui/src/lib/components/Button.svelte

@@ -28,7 +28,8 @@
 
 	let colorClass = {
 		none: '',
-		primary: 'bg-primary-500 hover:bg-primary-600 text-white focus-visible:bg-primary-500',
+		primary:
+			'bg-primary-500 hover:bg-primary-600 text-gray-800 dark:text-white focus-visible:bg-primary-500',
 		blue: `${styles.alliance.blue.primary} ${styles.alliance.blue.primaryHover} ${styles.alliance.blue.primaryFocus}`,
 		red: `${styles.alliance.red.primary} ${styles.alliance.red.primaryHover} ${styles.alliance.red.primaryFocus}`,
 		green: 'bg-green-500 hover:bg-green-600 text-white focus-visible:bg-green-500',

ui/src/lib/components/TextInput.svelte

@@ -24,7 +24,7 @@
 		{...restProps}
 		type="text"
 		bind:value={text}
-		class="block flex-1 rounded-md shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-indigo-600 py-1.5 px-2 text-gray-900 placeholder:text-gray-400"
+		class="block flex-1 rounded-md shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-indigo-600 dark:focus:ring-indigo-300 py-1.5 px-2 text-gray-900 dark:text-white placeholder:text-gray-400"
 		{placeholder}
 		{onblur}
 	/>

ui/src/lib/components/Toggle.svelte

@@ -23,7 +23,7 @@
 		{...restProps}
 		type="button"
 		class="relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-primary-600 focus:ring-offset-2 {checked
-			? 'bg-primary-600'
+			? 'bg-blue-600'
 			: 'bg-gray-200 dark:bg-neutral-600'}"
 		role="switch"
 		aria-checked={checked}

ui/src/routes/+layout.svelte

@@ -94,7 +94,9 @@
 				</div>
 
 				<!-- Sidebar component -->
-				<div class="flex grow flex-col gap-y-5 overflow-y-auto bg-primary-600 text-white px-6 pb-2">
+				<div
+					class="flex grow flex-col gap-y-5 overflow-y-auto bg-primary-600 text-gray-900 dark:text-white px-6 pb-2"
+				>
 					<div class="flex h-16 shrink-0 items-center font-semibold text-xl">FTA Notepad</div>
 					<nav class="flex flex-1 flex-col">
 						<ul role="list" class="flex flex-1 flex-col gap-y-2">
@@ -147,7 +149,9 @@
 	<!-- Static sidebar for desktop -->
 	<div class="hidden lg:fixed lg:inset-y-0 lg:flex lg:w-72 lg:flex-col">
 		<!-- Sidebar component -->
-		<div class="flex grow flex-col gap-y-5 overflow-y-auto bg-primary-600 text-white px-6">
+		<div
+			class="flex grow flex-col gap-y-5 overflow-y-auto bg-primary-600 text-gray-900 dark:text-white px-6"
+		>
 			<div class="flex h-16 shrink-0 items-center font-semibold text-xl">FTA Notepad</div>
 			<nav class="flex flex-1 flex-col">
 				<ul role="list" class="flex flex-1 flex-col gap-y-2">

ui/src/routes/fieldMonitor/+page.svelte

@@ -102,9 +102,9 @@
 		class="grid grid-cols-fieldmonitor lg:grid-cols-fieldmonitor-large gap-0.5 md:gap-1 mx-auto justify-center"
 	>
 		<div class="col-span-6 lg:col-span-8 flex text-lg md:text-2xl font-semibold">
-			<div class="bg-neutral-700 px-2">M: {matchNumber}</div>
+			<div class="bg-neutral-300 dark:bg-neutral-700 px-2">M: {matchNumber}</div>
 			<div class="flex-1 bg-green-600 px-2 text-center">{matchStatusToString(matchStatus)}</div>
-			<div class="bg-neutral-700 px-2">On Time</div>
+			<div class="bg-neutral-300 dark:bg-neutral-700 px-2">On Time</div>
 		</div>
 		<MonitorRow monitorFrame={blue1} {detailView} />
 		<MonitorRow monitorFrame={blue2} {detailView} />