✨ feat: integrate ThemeSwitcher into Footer and enhance responsiveness in LandingHero

Author: Strehk

src/lib/components/Footer.svelte

@@ -3,6 +3,7 @@
 	import { configPublic } from '$config/public';
 	import LanguageSwitcher from '$lib/components/LanguageSwitcher.svelte';
 	import * as m from '$lib/paraglide/messages.js';
+	import ThemeSwitcher from './ThemeSwitcher.svelte';
 </script>
 
 <div class="w-full p-4">
@@ -15,7 +16,10 @@
 				>{@html m.imprintAndPrivacy()}</a
 			>
 		</nav>
-		<LanguageSwitcher />
+		<div class="flex">
+			<ThemeSwitcher />
+			<LanguageSwitcher />
+		</div>
 		<nav>
 			<div class="grid grid-flow-col gap-4" id="socials">
 				<a href="https://www.instagram.com/dmun_ev/" aria-label="Instagram">

src/lib/components/LanguageSwitcher.svelte

@@ -34,7 +34,9 @@
 >
 	{#each locales as l}
 		{#if locale === l}
-			<div class="absolute top-0 right-0 bottom-0 left-0 flex items-center justify-center">
+			<div
+				class="absolute top-0 right-auto bottom-0 left-auto flex w-5 items-center justify-center"
+			>
 				<div in:fly={{ x: -20 }} out:fly={{ x: 20 }} class="fi fi-{localeLookup[l]}"></div>
 			</div>
 		{/if}

src/lib/utils/theme.svelte.ts

@@ -29,7 +29,7 @@ export function setTheme(newTheme: Theme) {
 export function updateTheme() {
 	if (!browser) return;
 	const storedTheme = localStorage.getItem('theme') as Theme | 'undefined';
-	if (storedTheme === 'undefined') {
+	if (storedTheme === 'undefined' || !storedTheme) {
 		localStorage.setItem('theme', 'system');
 		theme = 'system';
 	} else {

src/routes/(pages)/+page.svelte

@@ -27,8 +27,8 @@
 		<div class="max-w-7xl">
 			<LandingHero />
 
-			{#if $media.isTabletOrMobile}
-				<div class="flex h-40 w-full items-center justify-center bg-white">
+			<!-- {#if $media.isTabletOrMobile}
+				<div class="flex h-40 w-full items-center justify-center bg-base-100">
 					<img
 						src="/logo/svg/chase_logo_blue_text.svg"
 						style="object-fit:contain"
@@ -37,7 +37,7 @@
 						alt="Chase Logo"
 					/>
 				</div>
-			{/if}
+			{/if} -->
 
 			<CardSection />
 

src/routes/(pages)/Card.svelte

@@ -13,8 +13,8 @@
 </script>
 
 <div class="card bg-base-100 relative h-full flex-1 shadow-sm">
-	<div class="card-header flex h-60 items-center justify-center p-8">
-		<img {src} {alt} />
+	<div class="card-header flex max-h-60 items-center justify-center p-8">
+		<img {src} {alt} class="h-full w-full" />
 	</div>
 	<div class="card-body">
 		<h2 class="mb-4 text-center font-serif text-3xl font-bold">

src/routes/(pages)/LandingHero.svelte

@@ -22,24 +22,24 @@
 	class="relative flex flex-col items-center justify-center gap-5 p-4 pt-52 pb-20 lg:flex-row lg:pb-40"
 >
 	<div class="z-10" in:fly={{ y: 10, duration: 1000, delay: 200 }}>
-		<img src={availableIllustrations[illustration]} alt="Logo" width="500" height="128" />
+		<img src={availableIllustrations[illustration]} alt="Logo" width="500" height="128" class="" />
 	</div>
 	<div in:fade={{ duration: 500 }}>
 		<img
 			src={availableBlobs[blob]}
 			alt="Blob"
 			width="800"
 			height="128"
-			class="absolute top-24 left-0 z-0 md:top-0 lg:top-0"
+			class="absolute top-24 left-0 z-0 md:top-0 lg:top-0 dark:opacity-20"
 		/>
 	</div>
 	<div class="z-20 flex w-full flex-col items-center lg:w-1/2 lg:items-end">
 		<div in:fly={{ y: 10, duration: 1000, delay: 700 }}>
 			<h1
-				class="mb-4 text-center font-serif text-5xl leading-tight font-bold text-slate-900 lg:text-right lg:text-6xl dark:text-white"
+				class="mb-4 text-center font-serif text-5xl leading-tight font-bold lg:text-right lg:text-6xl"
 			>
 				<span
-					style="background: linear-gradient(to right, #3d7dd2, #0000d0); background-clip: text; -webkit-background-clip: text; color: transparent;"
+					class="from-primary-500 to-primary-800 dark:to-primary-300 bg-gradient-to-r bg-clip-text text-transparent"
 				>
 					MUN
 				</span>
@@ -48,7 +48,7 @@
 		</div>
 		<div in:fade={{ duration: 1500, delay: 1000 }}>
 			<h2
-				class="text-center text-xl leading-normal text-slate-900 lg:text-right lg:text-2xl dark:text-white"
+				class="dark:text-primary-100 text-center text-xl leading-normal lg:text-right lg:text-2xl"
 			>
 				{m.homeHeroText()}
 			</h2>