theming

src/app.css

@@ -5,9 +5,9 @@
 
 [data-theme='light'] {
     --text-color: #000000;
-    --bg-color: #f4f4f4;
-    --hover-bg-color: #e4e4f0;
-    --separator-line-color: #e0e0e0;
+    --bg-color: #e9e9e9;
+    --hover-bg-color: #e0e0e0;
+    --separator-line-color: #d0d0d0;
     --low-emphasis-text-color: #6b6b6b;
     --primary-color: #1F96F3;
     --dull-primary-color: #51aaf0;
@@ -15,6 +15,7 @@
     --bg-accent-color: #f4f4f4;
     --danger-color: #ff2d2f;
     --hyperlink-color: #3b82f6;
+    --nav-bg-color: #f0f0f0;
 }
 
 [data-theme='dark'] {
@@ -29,6 +30,7 @@
     --bg-accent-color: #202020;
     --danger-color: #ff1d1f;
     --hyperlink-color: #3b82f6;
+    --nav-bg-color: #101011;
 }
 
 body {
@@ -230,6 +232,10 @@ th.left, td.left {
     background-color: var(--elevated-bg-color);
 }
 
+.nav-bg {
+    background-color: var(--nav-bg-color);
+}
+
 .primary-bg-color {
     background-color: var(--primary-color);
 }

src/routes/+layout.svelte

@@ -52,8 +52,9 @@
 />
 
 <div class="flex min-h-screen flex-col">
-	<div class="bottom-border bg-color sticky top-0 z-50 flex h-14 justify-between p-3 align-middle">
-		<nav class="pt-1">
+	<nav class="bottom-border nav-bg sticky top-0 z-50 align-middle">
+		<div class="flex h-14 justify-between p-3">
+			<div class="pt-1">
 				<a class="hover-bg-color mr-1 rounded-md px-2 pb-2 pt-1.5" href="/">
 					<img
 						alt="MarinoDev Logo"
@@ -86,7 +87,7 @@
 						>
 					{/if}
 				{/if}
-		</nav>
+			</div>
 			<div>
 				<button
 					class="material-symbols-outlined hover-bg-color rounded-full p-1"
@@ -144,6 +145,7 @@
 				>
 			{/if}
 		</div>
+	</nav>
 
 	<div class="flex-grow">
 		{@render children()}