Changed themes

src/app.scss

@@ -14,16 +14,19 @@
 
 :root:not([data-theme='dark']) {
 	--muted-border-color: #c99a2c;
+	--card-sectionning-background-color: #189ad6;
+	--card-background-color: hsl(199, 80%, 55%);
+	--color: white;
+	--border-width: 2px;
+	--active-link-color: #0a1425;
 }
 
 @media only screen and (prefers-color-scheme: dark) {
 	:root:not([data-theme]) {
-		--background-color: #11191f;
 		--background-color: #0a1425;
-		--card-sectionning-background-color: #18232c;
 		--card-sectionning-background-color: #243043;
-		--card-background-color: #141e26;
 		--card-background-color: #0c192e;
 		--card-border-color: #c99a2c;
+		--active-link-color: #189ad6;
 	}
 }

src/routes/+layout.svelte

@@ -1,19 +1,26 @@
 <script lang="ts">
+	import { page } from '$app/stores';
 	import '@picocss/pico/';
 	import Fa from 'svelte-fa';
 	import { faBars } from '@fortawesome/free-solid-svg-icons';
 	import { faFacebook, faTwitter, faInstagram, faGitlab } from '@fortawesome/free-brands-svg-icons';
 </script>
 
-<nav>
+<nav id="topnav">
 	<ul>
 		<li><a href="/"><img id="logo" src="/favicon.png" alt="PLS Logo" /></a></li>
 		<li id="title"><strong>PLS 5618</strong></li>
 	</ul>
 	<ul>
-		<li><a href="/">L'équipe</a></li>
+		<li><a class={$page.route.id === '/' ? 'active' : ''} href="/"> L'équipe </a></li>
-		<li><a href="/resultats">Résultats</a></li>
+		<li>
-		<li><a href="/partenaires">Partenaires</a></li>
+			<a class={$page.route.id === '/resultats' ? 'active' : ''} href="/resultats"> Résultats </a>
+		</li>
+		<li>
+			<a class={$page.route.id === '/partenaires' ? 'active' : ''} href="/partenaires">
+				Partenaires
+			</a>
+		</li>
 	</ul>
 </nav>
 
@@ -42,6 +49,16 @@
 </footer>
 
 <style lang="scss">
+	#topnav {
+		background-color: var(--card-sectionning-background-color);
+		border-bottom: var(--border-width) solid var(--card-border-color);
+		ul > li > a {
+			color: white;
+			&.active {
+				color: var(--active-link-color);
+			}
+		}
+	}
 	footer ul {
 		min-width: 40%;
 		margin: auto;