Change card colors and add aestheticDark theme.

frontend/src/lib/components/AdventureCard.svelte

@@ -161,7 +161,7 @@
 {/if}
 
 <div
-	class="card w-full max-w-xs sm:max-w-sm md:max-w-md lg:max-w-md xl:max-w-md bg-primary-content shadow-xl text-base-content"
+	class="card w-full max-w-xs sm:max-w-sm md:max-w-md lg:max-w-md xl:max-w-md bg-neutral text-neutral-content shadow-xl"
 >
 	<figure>
 		{#if adventure.images && adventure.images.length > 0}

frontend/src/lib/components/ChecklistCard.svelte

@@ -29,7 +29,7 @@
 </script>
 
 <div
-	class="card w-full max-w-xs sm:max-w-sm md:max-w-md lg:max-w-md xl:max-w-md bg-primary-content shadow-xl overflow-hidden text-base-content"
+	class="card w-full max-w-xs sm:max-w-sm md:max-w-md lg:max-w-md xl:max-w-md bg-neutral text-neutral-content shadow-xl overflow-hidden"
 >
 	<div class="card-body">
 		<div class="flex justify-between">

frontend/src/lib/components/CollectionCard.svelte

@@ -78,7 +78,7 @@
 {/if}
 
 <div
-	class="card min-w-max lg:w-96 md:w-80 sm:w-60 xs:w-40 bg-primary-content shadow-xl text-base-content"
+	class="card min-w-max lg:w-96 md:w-80 sm:w-60 xs:w-40 bg-neutral text-neutral-content shadow-xl"
 >
 	<div class="card-body">
 		<div class="flex justify-between">

frontend/src/lib/components/CountryCard.svelte

@@ -13,7 +13,7 @@
 </script>
 
 <div
-	class="card w-full max-w-xs sm:max-w-sm md:max-w-md lg:max-w-md xl:max-w-md bg-primary-content shadow-xl overflow-hidden text-base-content"
+	class="card w-full max-w-xs sm:max-w-sm md:max-w-md lg:max-w-md xl:max-w-md bg-neutral text-neutral-content shadow-xl overflow-hidden"
 >
 	<figure>
 		<!-- svelte-ignore a11y-img-redundant-alt -->

frontend/src/lib/components/Navbar.svelte

@@ -202,7 +202,12 @@
 					</li>
 					<li>
 						<button formaction="/?/setTheme&theme=forest">Forest<Forest class="w-6 h-6" /></button>
-						<button formaction="/?/setTheme&theme=garden">Garden<Flower class="w-6 h-6" /></button>
+						<button formaction="/?/setTheme&theme=aestheticLight"
+							>Aesthetic Light<Flower class="w-6 h-6" /></button
+						>
+						<button formaction="/?/setTheme&theme=aestheticDark"
+							>Aesthetic Dark<Flower class="w-6 h-6" /></button
+						>
 						<button formaction="/?/setTheme&theme=aqua">Aqua<Water class="w-6 h-6" /></button>
 					</li>
 				</form>

frontend/src/lib/components/NoteCard.svelte

@@ -30,7 +30,7 @@
 </script>
 
 <div
-	class="card w-full max-w-xs sm:max-w-sm md:max-w-md lg:max-w-md xl:max-w-md bg-primary-content shadow-xl overflow-hidden text-base-content"
+	class="card w-full max-w-xs sm:max-w-sm md:max-w-md lg:max-w-md xl:max-w-md overflow-hidden bg-neutral text-neutral-content shadow-xl"
 >
 	<div class="card-body">
 		<div class="flex justify-between">

frontend/src/lib/components/RegionCard.svelte

@@ -54,7 +54,7 @@
 </script>
 
 <div
-	class="card w-full max-w-xs sm:max-w-sm md:max-w-md lg:max-w-md xl:max-w-md bg-primary-content shadow-xl overflow-hidden text-base-content"
+	class="card w-full max-w-xs sm:max-w-sm md:max-w-md lg:max-w-md xl:max-w-md bg-neutral text-neutral-content shadow-xl overflow-hidden"
 >
 	<div class="card-body">
 		{#if region.name_en && region.name !== region.name_en}

frontend/src/lib/components/TransportationCard.svelte

@@ -1,16 +1,10 @@
 <script lang="ts">
 	import { createEventDispatcher } from 'svelte';
-
-	import Launch from '~icons/mdi/launch';
 	import TrashCanOutline from '~icons/mdi/trash-can-outline';
-
 	import FileDocumentEdit from '~icons/mdi/file-document-edit';
-
+	import type { Transportation, User } from '$lib/types';
-	import { goto } from '$app/navigation';
-	import type { Collection, Transportation, User } from '$lib/types';
 	import { addToast } from '$lib/toasts';
 
-	import Plus from '~icons/mdi/plus';
 	import ArrowDownThick from '~icons/mdi/arrow-down-thick';
 
 	const dispatch = createEventDispatcher();
@@ -40,7 +34,7 @@
 </script>
 
 <div
-	class="card w-full max-w-xs sm:max-w-sm md:max-w-md lg:max-w-md xl:max-w-md bg-primary-content shadow-xl text-base-content"
+	class="card w-full max-w-xs sm:max-w-sm md:max-w-md lg:max-w-md xl:max-w-md bg-neutral text-neutral-content shadow-xl"
 >
 	<div class="card-body">
 		<h2 class="card-title overflow-ellipsis">{transportation.name}</h2>

frontend/src/routes/+page.server.ts

@@ -9,9 +9,18 @@ export const actions: Actions = {
 		// change the theme only if it is one of the allowed themes
 		if (
 			theme &&
-			['light', 'dark', 'night', 'retro', 'forest', 'aqua', 'forest', 'garden', 'emerald'].includes(
+			[
-				theme
+				'light',
-			)
+				'dark',
+				'night',
+				'retro',
+				'forest',
+				'aqua',
+				'forest',
+				'aestheticLight',
+				'aestheticDark',
+				'emerald'
+			].includes(theme)
 		) {
 			cookies.set('colortheme', theme, {
 				path: '/',

frontend/tailwind.config.js

@@ -15,7 +15,52 @@ export default {
 			'aqua',
 			'emerald',
 			{
-				garden: {
+				aestheticDark: {
+					primary: '#3e5747',
+					'primary-focus': '#2f4236',
+					'primary-content': '#e9e7e7',
+
+					secondary: '#547b82',
+					'secondary-focus': '#3d5960',
+					'secondary-content': '#c1dfe5',
+
+					accent: '#8b6161',
+					'accent-focus': '#6e4545',
+					'accent-content': '#f2eaea',
+
+					neutral: '#2b2a2a',
+					'neutral-focus': '#1c1b1b',
+					'neutral-content': '#e9e7e7',
+
+					'base-100': '#121212', // Dark background
+					'base-200': '#1d1d1d',
+					'base-300': '#292929',
+					'base-content': '#e9e7e7', // Light content on dark background
+
+					// set bg-primary-content
+					'bg-base': '#121212',
+					'bg-base-content': '#e9e7e7',
+
+					info: '#3b7ecb',
+					success: '#007766',
+					warning: '#d4c111',
+					error: '#e64a19',
+
+					'--rounded-box': '1rem',
+					'--rounded-btn': '.5rem',
+					'--rounded-badge': '1.9rem',
+
+					'--animation-btn': '.25s',
+					'--animation-input': '.2s',
+
+					'--btn-text-case': 'uppercase',
+					'--navbar-padding': '.5rem',
+					'--border-btn': '1px',
+
+					fontFamily:
+						'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace'
+				},
+				aestheticLight: {
 					primary: '#5a7c65',
 					'primary-focus': '#48604f',
 					'primary-content': '#dcd5d5',