adds dark mode

web/src/routes/+layout.svelte

@@ -2,12 +2,18 @@
     import Toast from "$lib/components/base/toast.svelte";
     import Footer from "$lib/components/footer.svelte";
     import NavBar from "$lib/components/nav_bar.svelte";
-    import "../app.css";
-    import "../components.css"
-    import '@fortawesome/fontawesome-free/css/all.min.css'
+    import { theme } from "$lib/stores/theme_store";
+    import "@fortawesome/fontawesome-free/css/all.min.css";
+    import "../css/app.css";
+    import "../css/components.css";
+    import "../css/theme.css";
+
 </script>
 
-<NavBar></NavBar>
-<Toast></Toast>
-<slot />
-<Footer></Footer>
+<div class="theme {$theme}">
+    <NavBar></NavBar>
+    <Toast></Toast>
+    <slot />
+
+    <Footer></Footer>
+</div>

web/src/routes/+page.svelte

@@ -83,7 +83,7 @@
     </div>
 </section>
 <section class="max-w-7xl mx-auto mt-8 px-8 xl:px-0">
-    <h2 class="text-4xl md:text-5xl font-bold text-primary">
+    <h2 class="text-4xl md:text-5xl font-bold">
         {$currentUser ? "Your" : "Explore"} trails
     </h2>
     <div
@@ -98,7 +98,7 @@
     </div>
 </section>
 <section class="max-w-7xl mx-auto mt-8 px-8 xl:px-0">
-    <h2 class="text-4xl md:text-5xl font-bold text-primary">By category</h2>
+    <h2 class="text-4xl md:text-5xl font-bold">By category</h2>
     <div
         id="categories"
         class="grid grid-cols- sm:grid-cols-2 lg:grid-cols-4 justify-items-center gap-8 py-8"

web/src/routes/trail/edit/[id]/+page.svelte

@@ -358,7 +358,7 @@
             style="display: none;"
             on:change={handleFileSelection}
         />
-        <hr />
+        <hr class="border-separator" />
         <h3 class="text-xl font-semibold">Basic Info</h3>
         <div class="flex gap-4 justify-around">
             <div class="flex flex-col items-center">
@@ -413,7 +413,7 @@
             ></Select>
         {/if}
         <Toggle name="public" label="Public" bind:value={$form.public}></Toggle>
-        <hr />
+        <hr class="border-separator"/>
         <h3 class="text-xl font-semibold">Waypoints</h3>
         <ul>
             {#each $form.expand.waypoints ?? [] as waypoint, i}
@@ -433,7 +433,7 @@
             on:click={beforeWaypointModalOpen}
             ><i class="fa fa-plus mr-2"></i>Add Waypoint</button
         >
-        <hr />
+        <hr class="border-separator"/>
         <h3 class="text-xl font-semibold">Photos</h3>
         <div class="flex gap-4 max-w-full overflow-x-scroll shrink-0">
             <button
@@ -460,7 +460,7 @@
                 </div>
             {/each}
         </div>
-        <hr />
+        <hr class="border-separator"/>
         <h3 class="text-xl font-semibold">Summit Book</h3>
         <ul>
             {#each $form.expand.summit_logs ?? [] as log, i}
@@ -479,7 +479,7 @@
             on:click={beforeSummitLogModalOpen}
             ><i class="fa fa-plus mr-2"></i>Add Entry</button
         >
-        <hr />
+        <hr class="border-separator"/>
         <Button
             primary={true}
             large={true}

web/src/routes/trail/view/[id]/+page.svelte

@@ -158,10 +158,11 @@
                 </h3>
             </div>
             {#if $currentUser && $currentUser.id == $trail.author}
-                <div class="px-4 py-2 bg-white rounded-full space-x-2">
+                <div class="px-4 py-2 bg-menu-background rounded-full space-x-2">
                     {#each dropdownItems as item}
                         <button
-                            class="rounded-full py-1 px-[10px] hover:bg-gray-100 focus:ring-4 ring-gray-200 transition-colors"
+                            data-title={item.text}
+                            class="tooltip btn-icon"
                             on:click={() => handleDropdownClick(item)}
                             ><i class="fa fa-{item.icon}"></i></button
                         >
@@ -201,13 +202,13 @@
         {/if}
     </section>
     {#if $trail.tags && $trail.tags.length > 0}
-        <hr />
+        <hr class="border-separator"/>
         <section class="flex p-8 gap-4 text-gray-600">
             {#each $trail.tags as tag}
                 <span class="py-2 px-4 border rounded-full">{tag}</span>
             {/each}
         </section>
-        <hr />
+        <hr class="border-separator"/>
     {/if}
     <section class="p-8">
         <Tabs {tabs} bind:activeTab></Tabs>

web/src/routes/trails/+page.svelte

@@ -169,7 +169,7 @@
 <main
     class="grid grid-cols-1 md:grid-cols-[300px_1fr] gap-8 max-w-7xl mx-6 md:mx-auto"
 >
-    <div class="trail-filters p-8 border rounded-xl">
+    <div class="trail-filters p-8 border border-input-border rounded-xl">
         <div class="flex gap-2 items-center">
             <div class="basis-full">
                 <Search
@@ -180,14 +180,14 @@
             </div>
             <button
                 id="sort-order-btn"
-                class="rounded-full py-1 px-2 hover:bg-gray-100 focus:ring-4 ring-gray-200 transition-colors md:hidden"
+                class="btn-icon md:hidden"
                 on:click={() => (filterExpanded = !filterExpanded)}
                 ><i class="fa fa-sliders"></i></button
             >
         </div>
 
         {#if filterExpanded}
-            <hr class="my-4" />
+            <hr class="my-4 border-separator" />
             <p class="text-sm font-medium pb-4">Category</p>
             {#each $categories as category, i}
                 <div class="flex items-center mb-4">
@@ -195,17 +195,17 @@
                         id="{category.name}-checkbox"
                         type="checkbox"
                         value={category.id}
-                        class="w-4 h-4 text-primary accent-primary bg-gray-100 border-gray-300 focus:ring-gray-400 focus:ring-2"
+                        class="w-4 h-4 accent-input-background border-input-border focus:ring-input-border-focus focus:ring-2"
                         on:change={() => setCategoryFilter(category)}
                     />
                     <label
                         for="{category.name}-checkbox"
-                        class="ms-2 text-sm text-gray-900 dark:text-gray-300"
+                        class="ms-2 text-sm"
                         >{category.name}</label
                     >
                 </div>
             {/each}
-            <hr class="my-4" />
+            <hr class="my-4 border-separator" />
             <p class="text-sm font-medium pb-4">Near</p>
             <div class="mb-8">
                 <Search
@@ -225,7 +225,7 @@
                 <span class="text-gray-500 text-sm">Radius:</span>
                 {formatMeters(filter.near.radius)}
             </p>
-            <hr class="my-4" />
+            <hr class="my-4 border-separator" />
             <p class="text-sm font-medium pb-4">Distance</p>
             <DoubleSlider
                 minValue={minDistance}
@@ -238,7 +238,7 @@
                 <span>{formatMeters(filter.distanceMin)}</span>
                 <span>{formatMeters(filter.distanceMax)}</span>
             </div>
-            <hr class="my-4" />
+            <hr class="my-4 border-separator" />
             <p class="text-sm font-medium pb-4">Elevation Gain</p>
             <DoubleSlider
                 minValue={minElevationGain}
@@ -251,7 +251,7 @@
                 <span>{formatMeters(filter.eleavationGainMin)}</span>
                 <span>{formatMeters(filter.elevationGainMax)}</span>
             </div>
-            <hr class="my-4" />
+            <hr class="my-4 border-separator" />
             <p class="text-sm font-medium pb-4">Completed</p>
             <RadioGroup
                 name="completed"
@@ -273,7 +273,7 @@
                     ></Select>
                     <button
                         id="sort-order-btn"
-                        class="rounded-full py-1 px-[10px] hover:bg-gray-100 focus:ring-4 ring-gray-200 transition-colors"
+                        class="btn-icon"
                         class:rotated={filter.sortOrder == "-"}
                         on:click={() => setSortOrder()}
                         ><i class="fa fa-arrow-up"></i></button