general adjustments to dark mode

rt-evil-inc · Sep 22, 2024 · 4b814e7 · 4b814e7
1 parent 37b293a
commit 4b814e7
Show file tree

Hide file tree

Showing 10 changed files with 1,825 additions and 1,811 deletions.
diff --git a/src/app.css b/src/app.css
@@ -28,6 +28,10 @@
   }
 }
 
+body {
+  @apply bg-background;
+}
+
 * {
   user-select: none;
 }
@@ -42,4 +46,14 @@ button,
 select,
 a {
     -webkit-tap-highlight-color: transparent;
+}
+
+.maplibregl-ctrl-attrib.maplibregl-compact {
+  @apply !bg-background;
+}
+.maplibregl-ctrl-attrib.maplibregl-compact * {
+  @apply !text-info;
+}
+.maplibregl-ctrl-attrib.maplibregl-compact summary {
+  @apply dark:invert;
 }
diff --git a/src/lib/components/Compass.svelte b/src/lib/components/Compass.svelte
@@ -4,11 +4,11 @@
 </script>
 
 {#if $bearing !== 0}
-	<button on:click={() => bearingNorth.set(true)} transition:fade={{ duration: 150 }} class="bg-background p-2 rounded-full grid grid-cols-1 grid-rows-1 w-12 h-12 active:bg-background" style:box-shadow="0px 0px 20px 0px var(--color-shadow)">
+	<button on:click={() => bearingNorth.set(true)} transition:fade={{ duration: 150 }} class="bg-background dark:bg-background-secondary p-2 rounded-full grid grid-cols-1 grid-rows-1 w-12 h-12 active:bg-background-secondary dark:active:bg-background-tertiary" style:box-shadow="0px 0px 20px 0px var(--color-shadow)">
 		<svg class="w-full h-full" style:transform="rotate({-$bearing}deg)" width="30" height="90" viewBox="0 0 30 90" fill="none" xmlns="http://www.w3.org/2000/svg">
-			<path fill-rule="evenodd" clip-rule="evenodd" d="M28.5166 52.6049C29.2024 50.5049 29.5452 47.7524 29.5452 45H0.45459C0.454585 47.7524 0.797443 50.5049 1.48317 52.6049L12.5167 86.3953C13.8881 90.5953 16.1117 90.5953 17.4831 86.3953L28.5166 52.6049Z" fill="#E5E5E5"/>
-			<path d="M28.5166 37.3952L17.4831 3.60487C16.1117 -0.595175 13.8881 -0.595177 12.5167 3.60486L1.48317 37.3952C0.797454 39.4952 0.454595 42.2476 0.45459 45H29.5452C29.5452 42.2476 29.2024 39.4952 28.5166 37.3952Z" fill="#79C000"/>
-			<circle cx="15" cy="45" r="6" fill="white"/>
+			<path fill-rule="evenodd" clip-rule="evenodd" d="M28.5166 52.6049C29.2024 50.5049 29.5452 47.7524 29.5452 45H0.45459C0.454585 47.7524 0.797443 50.5049 1.48317 52.6049L12.5167 86.3953C13.8881 90.5953 16.1117 90.5953 17.4831 86.3953L28.5166 52.6049Z" class="fill-background-tertiary dark:fill-label dark:opacity-50" />
+			<path d="M28.5166 37.3952L17.4831 3.60487C16.1117 -0.595175 13.8881 -0.595177 12.5167 3.60486L1.48317 37.3952C0.797454 39.4952 0.454595 42.2476 0.45459 45H29.5452C29.5452 42.2476 29.2024 39.4952 28.5166 37.3952Z" class="fill-primary" />
+			<circle cx="15" cy="45" r="6" class="fill-background dark:fill-background-secondary active:bg-background-secondary dark:active:bg-background-tertiary"/>
 		</svg>
 	</button>
 {/if}
diff --git a/src/lib/components/LocationButton.svelte b/src/lib/components/LocationButton.svelte
@@ -8,7 +8,7 @@
 	export let locationPermission = false;
 </script>
 
-<button class="bg-background p-2 rounded-full grid grid-cols-1 grid-rows-1 w-12 h-12 active:bg-background transition-colors" style:box-shadow="0px 0px 20px 0px var(--color-shadow)"
+<button class="bg-background dark:bg-background-secondary p-2 rounded-full grid grid-cols-1 grid-rows-1 w-12 h-12 active:bg-background dark:active:bg-background-tertiary transition-colors" style:box-shadow="0px 0px 20px 0px var(--color-shadow)"
 	on:click={ () => {
 		if (locationPermission) {
 			$following = !$following;

diff --git a/src/lib/components/Map.svelte b/src/lib/components/Map.svelte
@@ -177,7 +177,8 @@
 		map.addImage('dock_inactive_selected', await loadSvg('./assets/dock_marker_inactive_selected.svg'));
 
 		const primaryColor = getCssVariable('--color-primary');
-		const imgs = [['bike', './assets/bike_marker.svg', primaryColor], ['bike_selected', './assets/bike_marker_selected.svg', '#fff'], ['dock', './assets/dock_marker.svg', primaryColor], ['dock_selected', './assets/dock_marker_selected.svg', '#fff']];
+		const backgroundColor = getCssVariable('--color-background');
+		const imgs = [['bike', './assets/bike_marker.svg', primaryColor], ['bike_selected', './assets/bike_marker_selected.svg', backgroundColor], ['dock', './assets/dock_marker.svg', primaryColor], ['dock_selected', './assets/dock_marker_selected.svg', backgroundColor]];
 		const canvas = document.createElement('canvas');
 		const context = canvas.getContext('2d', { willReadFrequently: true })!;
 		const start = performance.now();
@@ -300,20 +301,20 @@
 {#if !ready}
 	<div out:fade={{ duration: 500 }} class="blur fixed bg-cover top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[2000px] h-[2000px] z-10 bg-[url(/assets/map-preview.jpg)]" />
 	<svg out:fade={{ duration: 500 }} class="absolute w-20 h-12 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-10 transition-opacity {$token === null ? 'opacity-0' : 'opacity-100'}" width="62" height="38" viewBox="0 0 62 38" fill="none" xmlns="http://www.w3.org/2000/svg">
-		<path d="M11.0862 26.6841L18.6347 20.9505C15.871 17.2807 10.0799 18.3456 7.56726 18.814C13.1653 19.8331 11.0862 26.6841 11.0862 26.6841Z" fill="#79C000"/>
-		<path d="M11.0862 26.6848L20.8612 26.8514C20.5211 24.2944 19.7072 22.3752 18.6347 20.9512L11.0862 26.6848Z" fill="#79C000"/>
-		<path d="M28.1018 26.9753L23.685 17.1157M28.1018 26.9753L42.185 10.4097M28.1018 26.9753L20.8612 26.8519M23.685 17.1157L19.7388 8.41601M23.685 17.1157L18.6347 20.9517M42.185 10.4097L46.638 22.118L50.2583 26.6853M42.185 10.4097L40.411 5.11738L44.7192 2L37.4785 2.39874M42.185 10.4097H46.245M20.8612 26.8519L11.0862 26.6853M20.8612 26.8519C20.5211 24.2949 19.7072 22.3757 18.6347 20.9517M19.7388 8.41601H16.6254M19.7388 8.41601H24.0833M11.0862 26.6853C11.0862 26.6853 13.1653 19.8343 7.56725 18.8152M11.0862 26.6853L18.6347 20.9517M7.56725 18.8152C10.0798 18.3468 15.871 17.282 18.6347 20.9517M7.56725 18.8152H2.987" stroke="#79C000" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+		<path d="M11.0862 26.6841L18.6347 20.9505C15.871 17.2807 10.0799 18.3456 7.56726 18.814C13.1653 19.8331 11.0862 26.6841 11.0862 26.6841Z" class="fill-primary"/>
+		<path d="M11.0862 26.6848L20.8612 26.8514C20.5211 24.2944 19.7072 22.3752 18.6347 20.9512L11.0862 26.6848Z" class="fill-primary"/>
+		<path d="M28.1018 26.9753L23.685 17.1157M28.1018 26.9753L42.185 10.4097M28.1018 26.9753L20.8612 26.8519M23.685 17.1157L19.7388 8.41601M23.685 17.1157L18.6347 20.9517M42.185 10.4097L46.638 22.118L50.2583 26.6853M42.185 10.4097L40.411 5.11738L44.7192 2L37.4785 2.39874M42.185 10.4097H46.245M20.8612 26.8519L11.0862 26.6853M20.8612 26.8519C20.5211 24.2949 19.7072 22.3757 18.6347 20.9517M19.7388 8.41601H16.6254M19.7388 8.41601H24.0833M11.0862 26.6853C11.0862 26.6853 13.1653 19.8343 7.56725 18.8152M11.0862 26.6853L18.6347 20.9517M7.56725 18.8152C10.0798 18.3468 15.871 17.282 18.6347 20.9517M7.56725 18.8152H2.987" class="stroke-primary" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
 		<g class="animate-spin origin-[11.5026px_26.4977px]">
-			<circle cx="11.5026" cy="26.4977" r="9.50259" stroke="#79C000" stroke-width="4"/>
-			<path d="M2.10678 26.582H21.0676" stroke="#79C000"/>
-			<path d="M6.84695 34.793L16.3274 18.3724" stroke="#79C000"/>
-			<path d="M16.3274 34.793L6.84696 18.3724" stroke="#79C000"/>
+			<circle cx="11.5026" cy="26.4977" r="9.50259" class="stroke-primary" stroke-width="4"/>
+			<path d="M2.10678 26.582H21.0676" class="stroke-primary"/>
+			<path d="M6.84695 34.793L16.3274 18.3724" class="stroke-primary"/>
+			<path d="M16.3274 34.793L6.84696 18.3724" class="stroke-primary"/>
 		</g>
 		<g class="animate-spin origin-[50.1864px_26.4903px]">
-			<circle cx="50.1864" cy="26.4903" r="9.49523" stroke="#79C000" stroke-width="4"/>
-			<path d="M40.7966 26.5762H59.7452" stroke="#79C000"/>
-			<path d="M45.5337 34.7793L55.0081 18.3693" stroke="#79C000"/>
-			<path d="M55.0081 34.7793L45.5337 18.3693" stroke="#79C000"/>
+			<circle cx="50.1864" cy="26.4903" r="9.49523" class="stroke-primary" stroke-width="4"/>
+			<path d="M40.7966 26.5762H59.7452" class="stroke-primary"/>
+			<path d="M45.5337 34.7793L55.0081 18.3693" class="stroke-primary"/>
+			<path d="M55.0081 34.7793L45.5337 18.3693" class="stroke-primary"/>
 		</g>
 	</svg>
 {/if}

diff --git a/src/lib/components/ProfileButton.svelte b/src/lib/components/ProfileButton.svelte
@@ -9,7 +9,7 @@
 				<path d="M156.963 119.452C159.69 120.499 161.069 123.568 159.822 126.208C154.644 137.163 146.715 146.628 136.771 153.656C125.384 161.703 111.867 166.193 97.9277 166.558C83.9889 166.923 70.2549 163.147 58.4624 155.706C46.67 148.266 37.3487 137.495 31.6773 124.757C26.0059 112.019 24.2392 97.8854 26.6006 84.1432C28.9619 70.401 35.3452 57.6677 44.9434 47.5534C54.5415 37.439 66.9233 30.398 80.5231 27.3207C92.3994 24.6334 104.739 25.0742 116.344 28.5568C119.141 29.3961 120.499 32.475 119.452 35.2012V35.2012C118.406 37.9275 115.352 39.2649 112.544 38.4627C102.902 35.7079 92.6926 35.4094 82.857 37.635C71.2972 40.2507 60.7726 46.2355 52.6142 54.8327C44.4558 63.4299 39.03 74.2532 37.0228 85.9341C35.0157 97.6149 36.5174 109.629 41.3381 120.456C46.1587 131.283 54.0818 140.438 64.1054 146.763C74.129 153.087 85.8029 156.297 97.6509 155.987C109.499 155.677 120.989 151.86 130.668 145.02C138.903 139.2 145.512 131.413 149.917 122.404C151.2 119.781 154.237 118.406 156.963 119.452V119.452Z" class="fill-primary"/>
 				<path d="M127.455 38.8036C128.871 36.2495 132.102 35.3103 134.543 36.9134C145.452 44.0784 154.189 54.1537 159.734 66.0451C165.279 77.9365 167.381 91.1059 165.858 104.068C165.517 106.968 162.721 108.84 159.854 108.283C156.988 107.726 155.14 104.95 155.443 102.046C156.563 91.2828 154.751 80.381 150.15 70.5143C145.549 60.6476 138.363 52.2519 129.398 46.1922C126.978 44.5569 126.04 41.3576 127.455 38.8036Z" class="fill-primary"/>
 				<g>
-					<circle cx="96" cy="96" r="50" class="group-active:fill-background-secondary fill-background transition-colors" />
+					<circle cx="96" cy="96" r="50" class="group-active:fill-background-secondary dark:group-active:fill-background-tertiary fill-background dark:fill-background-secondary transition-colors" />
 				</g>
 			</g>
 		</svg>

diff --git a/src/lib/components/TripRating.svelte b/src/lib/components/TripRating.svelte
@@ -40,7 +40,7 @@
 		{#if rating === 1}
 			<div transition:fade={{ duration: 150 }} class="flex items-center justify-center w-[40px] h-[40px] col-start-1 col-end-1 row-start-1 row-end-1">
 				<svg class="w-[33.33px] h-[33.33px]" width="91" height="91" viewBox="0 0 91 91" fill="none" xmlns="http://www.w3.org/2000/svg">
-					<path d="M45.14 86.28C39.7374 86.28 34.3877 85.2159 29.3964 83.1484C24.4051 81.0809 19.8698 78.0506 16.0496 74.2304C12.2294 70.4102 9.19908 65.8749 7.1316 60.8836C5.06412 55.8923 4 50.5426 4 45.14C4 39.7374 5.06412 34.3877 7.1316 29.3964C9.19908 24.4051 12.2294 19.8698 16.0496 16.0496C19.8698 12.2294 24.4051 9.19907 29.3964 7.1316C34.3877 5.06412 39.7374 4 45.14 4C56.051 4 66.5151 8.33438 74.2304 16.0496C81.9456 23.7649 86.28 34.229 86.28 45.14C86.28 56.051 81.9456 66.5151 74.2304 74.2304C66.5151 81.9456 56.051 86.28 45.14 86.28Z" fill="#79C000" stroke="#79C000" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"/>
+					<path d="M45.14 86.28C39.7374 86.28 34.3877 85.2159 29.3964 83.1484C24.4051 81.0809 19.8698 78.0506 16.0496 74.2304C12.2294 70.4102 9.19908 65.8749 7.1316 60.8836C5.06412 55.8923 4 50.5426 4 45.14C4 39.7374 5.06412 34.3877 7.1316 29.3964C9.19908 24.4051 12.2294 19.8698 16.0496 16.0496C19.8698 12.2294 24.4051 9.19907 29.3964 7.1316C34.3877 5.06412 39.7374 4 45.14 4C56.051 4 66.5151 8.33438 74.2304 16.0496C81.9456 23.7649 86.28 34.229 86.28 45.14C86.28 56.051 81.9456 66.5151 74.2304 74.2304C66.5151 81.9456 56.051 86.28 45.14 86.28Z" class="fill-primary stroke-primary" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"/>
 					<path d="M27 63.2833L31.5711 58.7122L38.4278 63.2833L45.2844 58.7122L52.1411 63.2833L58.9978 58.7122L63.5689 63.2833M29.2856 42.7133L36.1422 35.8567L29.2856 29M61.2833 42.7133L54.4267 35.8567L61.2833 29" stroke="white" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"/>
 				</svg>
 			</div>

diff --git a/src/lib/components/settings/About.svelte b/src/lib/components/settings/About.svelte
@@ -75,9 +75,9 @@
 					<svg class="h-full w-[110px] -rotate-90 transition-opacity duration-75" width="62" height="38" viewBox="0 0 62 38" fill="none" xmlns="http://www.w3.org/2000/svg"
 						class:opacity-0={!showingBike}
 					>
-						<path d="M11.0862 26.6841L18.6347 20.9505C15.871 17.2807 10.0799 18.3456 7.56726 18.814C13.1653 19.8331 11.0862 26.6841 11.0862 26.6841Z" fill="#79C000"/>
-						<path d="M11.0862 26.6848L20.8612 26.8514C20.5211 24.2944 19.7072 22.3752 18.6347 20.9512L11.0862 26.6848Z" fill="#79C000"/>
-						<path d="M28.1018 26.9753L23.685 17.1157M28.1018 26.9753L42.185 10.4097M28.1018 26.9753L20.8612 26.8519M23.685 17.1157L19.7388 8.41601M23.685 17.1157L18.6347 20.9517M42.185 10.4097L46.638 22.118L50.2583 26.6853M42.185 10.4097L40.411 5.11738L44.7192 2L37.4785 2.39874M42.185 10.4097H46.245M20.8612 26.8519L11.0862 26.6853M20.8612 26.8519C20.5211 24.2949 19.7072 22.3757 18.6347 20.9517M19.7388 8.41601H16.6254M19.7388 8.41601H24.0833M11.0862 26.6853C11.0862 26.6853 13.1653 19.8343 7.56725 18.8152M11.0862 26.6853L18.6347 20.9517M7.56725 18.8152C10.0798 18.3468 15.871 17.282 18.6347 20.9517M7.56725 18.8152H2.987" stroke="#79C000" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+						<path d="M11.0862 26.6841L18.6347 20.9505C15.871 17.2807 10.0799 18.3456 7.56726 18.814C13.1653 19.8331 11.0862 26.6841 11.0862 26.6841Z" class="fill-primary"/>
+						<path d="M11.0862 26.6848L20.8612 26.8514C20.5211 24.2944 19.7072 22.3752 18.6347 20.9512L11.0862 26.6848Z" class="fill-primary"/>
+						<path d="M28.1018 26.9753L23.685 17.1157M28.1018 26.9753L42.185 10.4097M28.1018 26.9753L20.8612 26.8519M23.685 17.1157L19.7388 8.41601M23.685 17.1157L18.6347 20.9517M42.185 10.4097L46.638 22.118L50.2583 26.6853M42.185 10.4097L40.411 5.11738L44.7192 2L37.4785 2.39874M42.185 10.4097H46.245M20.8612 26.8519L11.0862 26.6853M20.8612 26.8519C20.5211 24.2949 19.7072 22.3757 18.6347 20.9517M19.7388 8.41601H16.6254M19.7388 8.41601H24.0833M11.0862 26.6853C11.0862 26.6853 13.1653 19.8343 7.56725 18.8152M11.0862 26.6853L18.6347 20.9517M7.56725 18.8152C10.0798 18.3468 15.871 17.282 18.6347 20.9517M7.56725 18.8152H2.987" class="stroke-primary" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
 					</svg>
 				</div>
 			</div>

diff --git a/src/lib/components/settings/History.svelte b/src/lib/components/settings/History.svelte
@@ -110,20 +110,20 @@
 			style:padding-bottom={$safeInsets.bottom + 'px'}
 			bind:this={observed}>
 			<svg class="w-20 h-12 mb-4" width="62" height="38" viewBox="0 0 62 38" fill="none" xmlns="http://www.w3.org/2000/svg">
-				<path d="M11.0862 26.6841L18.6347 20.9505C15.871 17.2807 10.0799 18.3456 7.56726 18.814C13.1653 19.8331 11.0862 26.6841 11.0862 26.6841Z" fill="#79C000"/>
-				<path d="M11.0862 26.6848L20.8612 26.8514C20.5211 24.2944 19.7072 22.3752 18.6347 20.9512L11.0862 26.6848Z" fill="#79C000"/>
-				<path d="M28.1018 26.9753L23.685 17.1157M28.1018 26.9753L42.185 10.4097M28.1018 26.9753L20.8612 26.8519M23.685 17.1157L19.7388 8.41601M23.685 17.1157L18.6347 20.9517M42.185 10.4097L46.638 22.118L50.2583 26.6853M42.185 10.4097L40.411 5.11738L44.7192 2L37.4785 2.39874M42.185 10.4097H46.245M20.8612 26.8519L11.0862 26.6853M20.8612 26.8519C20.5211 24.2949 19.7072 22.3757 18.6347 20.9517M19.7388 8.41601H16.6254M19.7388 8.41601H24.0833M11.0862 26.6853C11.0862 26.6853 13.1653 19.8343 7.56725 18.8152M11.0862 26.6853L18.6347 20.9517M7.56725 18.8152C10.0798 18.3468 15.871 17.282 18.6347 20.9517M7.56725 18.8152H2.987" stroke="#79C000" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+				<path d="M11.0862 26.6841L18.6347 20.9505C15.871 17.2807 10.0799 18.3456 7.56726 18.814C13.1653 19.8331 11.0862 26.6841 11.0862 26.6841Z" class="fill-primary"/>
+				<path d="M11.0862 26.6848L20.8612 26.8514C20.5211 24.2944 19.7072 22.3752 18.6347 20.9512L11.0862 26.6848Z" class="fill-primary"/>
+				<path d="M28.1018 26.9753L23.685 17.1157M28.1018 26.9753L42.185 10.4097M28.1018 26.9753L20.8612 26.8519M23.685 17.1157L19.7388 8.41601M23.685 17.1157L18.6347 20.9517M42.185 10.4097L46.638 22.118L50.2583 26.6853M42.185 10.4097L40.411 5.11738L44.7192 2L37.4785 2.39874M42.185 10.4097H46.245M20.8612 26.8519L11.0862 26.6853M20.8612 26.8519C20.5211 24.2949 19.7072 22.3757 18.6347 20.9517M19.7388 8.41601H16.6254M19.7388 8.41601H24.0833M11.0862 26.6853C11.0862 26.6853 13.1653 19.8343 7.56725 18.8152M11.0862 26.6853L18.6347 20.9517M7.56725 18.8152C10.0798 18.3468 15.871 17.282 18.6347 20.9517M7.56725 18.8152H2.987" class="stroke-primary" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
 				<g class="animate-spin origin-[11.5026px_26.4977px]">
-					<circle cx="11.5026" cy="26.4977" r="9.50259" stroke="#79C000" stroke-width="4"/>
-					<path d="M2.10678 26.582H21.0676" stroke="#79C000"/>
-					<path d="M6.84695 34.793L16.3274 18.3724" stroke="#79C000"/>
-					<path d="M16.3274 34.793L6.84696 18.3724" stroke="#79C000"/>
+					<circle cx="11.5026" cy="26.4977" r="9.50259" class="stroke-primary" stroke-width="4"/>
+					<path d="M2.10678 26.582H21.0676" class="stroke-primary"/>
+					<path d="M6.84695 34.793L16.3274 18.3724" class="stroke-primary"/>
+					<path d="M16.3274 34.793L6.84696 18.3724" class="stroke-primary"/>
 				</g>
 				<g class="animate-spin origin-[50.1864px_26.4903px]">
-					<circle cx="50.1864" cy="26.4903" r="9.49523" stroke="#79C000" stroke-width="4"/>
-					<path d="M40.7966 26.5762H59.7452" stroke="#79C000"/>
-					<path d="M45.5337 34.7793L55.0081 18.3693" stroke="#79C000"/>
-					<path d="M55.0081 34.7793L45.5337 18.3693" stroke="#79C000"/>
+					<circle cx="50.1864" cy="26.4903" r="9.49523" class="stroke-primary" stroke-width="4"/>
+					<path d="M40.7966 26.5762H59.7452" class="stroke-primary"/>
+					<path d="M45.5337 34.7793L55.0081 18.3693" class="stroke-primary"/>
+					<path d="M55.0081 34.7793L45.5337 18.3693" class="stroke-primary"/>
 				</g>
 			</svg>
 		</div>