src/app.css

@@ -37,6 +37,9 @@
     --ring: 20 14.3% 4.1%;
 
     --radius: 0.5rem;
+
+	 --name: theme('colors.java.800');
+	 --navlink: theme('colors.eucalyptus.400');
   }
 
   .dark {
@@ -68,6 +71,8 @@
     --destructive-foreground: 60 9.1% 97.8%;
 
     --ring: 24 5.7% 82.9%;
+	 --name: theme('colors.java.300');
+	 --navlink: theme('colors.eucalyptus.200');
   }
 }
 
@@ -107,6 +112,7 @@ a, button {
 	text-shadow: 0 0 5px;
 }
 .nav-link {
+	color: var(--navlink);
 	@apply text-lg;
 	font-weight: 500;
 	font-family: serif;

src/lib/components/ThemeSwitch.svelte

@@ -19,7 +19,7 @@
 	}
 </script>
 
-<button on:click={toggleTheme} aria-label="Toggle Theme">
+<button class="nav-link" on:click={toggleTheme} aria-label="Toggle Theme">
 	{#if $theme === "tokiwa"}
 		<Sun />
 	{:else}

src/routes/+page.svelte

@@ -51,15 +51,18 @@
 				 style="padding-bottom: {(1 - progress) * 50}vh"
 		>
 			<div id="navbar" class="h-5 items-center space-x-4 text-sm">
-				<a href="#bio">Bio</a>
+				<a class="nav-link" href="#bio">Bio</a>
 				<Separator class="bg-gray-500 dark:bg-gray-100" orientation="vertical" />
 				{#each routes as item}
 					{#if item.route !== "/"}
-						<a href={item.route} class:disabled-link={item.disabled}>{item.name}</a>
+						<a
+							href={item.route}
+							class="nav-link"
+							class:disabled-link={item.disabled}>{item.name}</a>
 						<Separator class="bg-gray-500 dark:bg-gray-100" orientation="vertical" />
 					{/if}
 				{/each}
-				<a class="icon" href="/rss.xml"><Rss /></a>
+				<a class="icon nav-link" href="/rss.xml"><Rss /></a>
 				<Separator class="bg-gray-500 dark:bg-gray-100" orientation="vertical" />
 				<ThemeSwitch />
 			</div>
@@ -136,7 +139,7 @@
 		@apply bg-background;
 		@apply dark:bg-gray-800;
 		box-shadow:
-			0px -5px 10px 10px rgba(200,200,200,0.4);
+			0px -5px 10px 10px var(--foreground);
 	}
 	#bio {
 		max-width: max(50vw, 100vh);
@@ -149,14 +152,14 @@
 		font-family: serif;
 		font-size: min(10vw, 60px);
 		display: inline-block;
-		color: theme('colors.java.800');
+		color: var(--name);
 	}
 	#avatar {
 		line-height: 0;
 		display: inline-block;
 		margin: 5px;
 		margin-right: auto;
-		border: 4px solid theme('colors.eucalyptus.500');
+		border: 1px solid var(--name);
 		border-radius: 50%;
 		aspect-ratio: 1;
 		max-width: 20%;

src/routes/Navbar.svelte

@@ -29,7 +29,7 @@
 		font-family: serif;
 		font-size: 3rem;
 		font-weight: normal;
-		color: theme('colors.java.800');
+		color: var(--name);
 	}
 	#navbar {
 		display: flex;