From dc01aa314c65f895e6beaca5399d041482ddfdd3 Mon Sep 17 00:00:00 2001
From: John O'Keefe <jrokeefe@protonmail.com>
Date: Mon, 3 Mar 2025 15:29:33 -0500
Subject: [PATCH] made dark mode default for every element

---
 frontend/src/helperComponents/Anime.svelte    | 48 ++++++-------------
 .../src/helperComponents/Datepicker.svelte    | 48 +++++++++----------
 2 files changed, 39 insertions(+), 57 deletions(-)

diff --git a/frontend/src/helperComponents/Anime.svelte b/frontend/src/helperComponents/Anime.svelte
index 8287446..0dc1b3e 100644
--- a/frontend/src/helperComponents/Anime.svelte
+++ b/frontend/src/helperComponents/Anime.svelte
@@ -481,10 +481,10 @@
                             data-input-counter-decrement="quantity-input"
                             on:click={() =>
                                 (currentAniListAnime.data.MediaList.progress -= 1)}
-                            class="bg-gray-100 dark:bg-gray-700 dark:hover:bg-gray-600 dark:border-gray-600 hover:bg-gray-200 border border-gray-300 rounded-s-lg p-3 h-11 focus:ring-gray-100 dark:focus:ring-gray-700 focus:ring-2 focus:outline-none"
+                            class="bg-gray-700 hover:bg-gray-600 border-gray-600 border rounded-s-lg p-3 h-11 focus:ring-gray-700 focus:ring-2 focus:outline-none"
                         >
                             <svg
-                                class="w-3 h-3 text-gray-900 dark:text-white"
+                                class="w-3 h-3 text-white"
                                 aria-hidden="true"
                                 xmlns="http://www.w3.org/2000/svg"
                                 fill="none"
@@ -531,10 +531,10 @@
                             data-input-counter-increment="quantity-input"
                             on:click={() =>
                                 (currentAniListAnime.data.MediaList.progress += 1)}
-                            class="bg-gray-100 dark:bg-gray-700 dark:hover:bg-gray-600 dark:border-gray-600 hover:bg-gray-200 border border-gray-300 rounded-e-lg p-3 h-11 focus:ring-gray-100 dark:focus:ring-gray-700 focus:ring-2 focus:outline-none"
+                            class="bg-gray-700 hover:bg-gray-600 border-gray-600 border rounded-e-lg p-3 h-11 focus:ring-gray-700 focus:ring-2 focus:outline-none"
                         >
                             <svg
-                                class="w-3 h-3 text-gray-900 dark:text-white"
+                                class="w-3 h-3 text-white"
                                 aria-hidden="true"
                                 xmlns="http://www.w3.org/2000/svg"
                                 fill="none"
@@ -565,25 +565,7 @@
                     {/if}
                 </div>
 
-                <div>
-                    <label
-                        for="status"
-                        class="text-left block mb-2 text-sm font-medium text-gray-900 dark:text-white"
-                        >Status</label
-                    >
-                    <select
-                        id="status"
-                        name="status"
-                        class="border text-sm rounded-lg
-                            block p-2.5 bg-gray-700 border-gray-600 placeholder-gray-400
-                            text-white focus:ring-blue-500 focus:border-blue-500"
-                        bind:value={startingAnilistStatusOption}
-                    >
-                        {#each statusOptions as option}
-                            <option value={option}>{option.aniList}</option>
-                        {/each}
-                    </select>
-                </div>
+
             </div>
             <div
                 class="flex flex-col md:flex-row md:pl-10 md:pr-10 pt-5 pb-5 justify-center md:gap-x-16 lg:gap-x-36"
@@ -671,8 +653,8 @@
                 disabled={isSubmitting}
                 id="sync-button"
                 class="text-white {$submitSuccess
-                    ? 'bg-green-600 dark:bg-green-600 hover:bg-green-700 dark:hover:bg-green-700 focus:ring-4 focus:ring-green-800 dark:focus:ring-green-800'
-                    : 'bg-blue-600 dark:bg-blue-600 hover:bg-blue-700 dark:hover:bg-blue-700 focus:ring-4 focus:ring-blue-800 dark:focus:ring-blue-800'} font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 focus:outline-none"
+                    ? 'bg-green-600 hover:bg-green-700 focus:ring-4 focus:ring-green-800'
+                    : 'bg-blue-600 hover:bg-blue-700 focus:ring-4 focus:ring-blue-800'} font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 focus:outline-none"
                 type="submit"
             >
                 <svg
@@ -699,8 +681,8 @@
             </Button>
             <Button
                 class="text-white bg-gray-800 border border-gray-600 focus:outline-none hover:bg-gray-700 focus:ring-4
-                    focus:ring-gray-700 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-gray-800 dark:text-white
-                    dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-600 dark:focus:ring-gray-700"
+                    focus:ring-gray-700 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2
+                    hover:border-gray-600"
                 on:click={async () => {
                     await CheckIfAniListLoggedInAndLoadWatchList();
                     return push("/");
@@ -720,8 +702,8 @@
                 disabled={isSubmitting}
                 id="delete-button"
                 class="text-white bg-red-700 {$submitSuccess
-                    ? 'bg-green-600 dark:bg-green-600 hover:bg-green-700 dark:hover:bg-green-700 focus:ring-4 focus:ring-green-800 dark:focus:ring-green-800'
-                    : 'bg-red-600 dark:bg-red-600 hover:bg-red-700 dark:hover:bg-red-700 focus:ring-4 focus:ring-red-800 dark:focus:ring-red-800'} font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 focus:outline-none"
+                    ? 'bg-green-600 hover:bg-green-700 focus:ring-4 focus:ring-green-800'
+                    : 'bg-red-600 hover:bg-red-700 focus:ring-4 focus:ring-red-800'} font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 focus:outline-none"
                 on:click={deleteEntries}
             >
                 <svg
@@ -754,8 +736,8 @@
                 disabled={isSubmitting}
                 id="sync-button"
                 class="text-white {$submitSuccess
-                    ? 'bg-green-600 dark:bg-green-600 hover:bg-green-700 dark:hover:bg-green-700 focus:ring-4 focus:ring-green-800 dark:focus:ring-green-800'
-                    : 'bg-blue-600 dark:bg-blue-600 hover:bg-blue-700 dark:hover:bg-blue-700 focus:ring-4 focus:ring-blue-800 dark:focus:ring-blue-800'} font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 focus:outline-none"
+                    ? 'bg-green-600 hover:bg-green-700 focus:ring-4 focus:ring-green-800'
+                    : 'bg-blue-600 hover:bg-blue-700 focus:ring-4 focus:ring-blue-800'} font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 focus:outline-none"
                 type="submit"
             >
                 <svg
@@ -782,8 +764,8 @@
             </Button>
             <Button
                 class="text-white bg-gray-800 border border-gray-600 focus:outline-none hover:bg-gray-700 focus:ring-4
-                    focus:ring-gray-700 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-gray-800 dark:text-white
-                    dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-600 dark:focus:ring-gray-700"
+                    focus:ring-gray-700 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2
+                    hover:border-gray-600"
                 on:click={async () => {
                     await CheckIfAniListLoggedInAndLoadWatchList();
                     return push("/");
diff --git a/frontend/src/helperComponents/Datepicker.svelte b/frontend/src/helperComponents/Datepicker.svelte
index e98932a..4bfaa70 100644
--- a/frontend/src/helperComponents/Datepicker.svelte
+++ b/frontend/src/helperComponents/Datepicker.svelte
@@ -50,19 +50,19 @@
     function getFocusRingClass(color: Button["color"]): string {
         switch (color) {
             case "primary":
-                return "focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400";
+                return "focus:ring-2 focus:ring-primary-400";
             case "blue":
-                return "focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400";
+                return "focus:ring-2 focus:ring-blue-400";
             case "red":
-                return "focus:ring-2 focus:ring-red-500 dark:focus:ring-red-400";
+                return "focus:ring-2 focus:ring-red-400";
             case "green":
-                return "focus:ring-2 focus:ring-green-500 dark:focus:ring-green-400";
+                return "focus:ring-2 focus:ring-green-400";
             case "yellow":
-                return "focus:ring-2 focus:ring-yellow-500 dark:focus:ring-yellow-400";
+                return "focus:ring-2 focus:ring-yellow-400";
             case "purple":
-                return "focus:ring-2 focus:ring-purple-500 dark:focus:ring-purple-400";
+                return "focus:ring-2 focus:ring-purple-400";
             case "slate":
-                return "focus:ring-2 focus:ring-slate-500 dark:focus:ring-slate-400";
+                return "focus:ring-2 focus:ring-slate-400";
             default:
                 return "";
         }
@@ -71,19 +71,19 @@
     function getRangeBackgroundClass(color: Button["color"]): string {
         switch (color) {
             case "primary":
-                return "bg-primary-100 dark:bg-primary-900";
+                return "bg-primary-900";
             case "blue":
-                return "bg-blue-100 dark:bg-blue-900";
+                return "bg-blue-900";
             case "red":
-                return "bg-red-100 dark:bg-red-900";
+                return "bg-red-900";
             case "green":
-                return "bg-green-100 dark:bg-green-900";
+                return "bg-green-900";
             case "yellow":
-                return "bg-yellow-100 dark:bg-yellow-900";
+                return "bg-yellow-900";
             case "purple":
-                return "bg-purple-100 dark:bg-purple-900";
+                return "bg-purple-900";
             case "slate":
-                return "bg-slate-100 dark:bg-slate-900";
+                return "bg-slate-900";
             default:
                 return "";
         }
@@ -297,7 +297,7 @@
             <input
                 bind:this={inputElement}
                 type="text"
-                class="w-full px-4 py-3 text-sm border rounded-md focus:outline-none dark:bg-gray-700 dark:text-white dark:border-gray-600 {getFocusRingClass(
+                class="w-full px-4 py-3 text-sm border rounded-md focus:outline-none bg-gray-700 text-white border-gray-600 {getFocusRingClass(
                     color,
                 )} {inputClass}"
                 {placeholder}
@@ -313,13 +313,13 @@
             />
             <button
                 type="button"
-                class="absolute inset-y-0 right-0 flex items-center px-3 text-gray-500 dark:text-gray-400 focus:outline-none"
+                class="absolute inset-y-0 right-0 flex items-center px-3 text-gray-400 focus:outline-none"
                 on:click={() => (isOpen = !isOpen)}
                 {disabled}
                 aria-label={isOpen ? "Close date picker" : "Open date picker"}
             >
                 <svg
-                    class="w-4 h-4 text-gray-500 dark:text-gray-400"
+                    class="w-4 h-4 text-gray-400"
                     aria-hidden="true"
                     xmlns="http://www.w3.org/2000/svg"
                     fill="currentColor"
@@ -339,14 +339,14 @@
             id="datepicker-dropdown"
             class="
         {inline ? '' : 'absolute z-10 mt-1'}
-        bg-white dark:bg-gray-800 rounded-md shadow-lg"
+        bg-gray-800 rounded-md shadow-lg"
             transition:fade={{ duration: 100 }}
             role="dialog"
             aria-label="Calendar"
         >
             <div class="p-4" role="application">
                 {#if title}
-                    <h2 class="text-lg font-semibold mb-4 dark:text-white">
+                    <h2 class="text-lg font-semibold mb-4 text-white">
                         {title}
                     </h2>
                 {/if}
@@ -358,7 +358,7 @@
                         aria-label="Previous month"
                     >
                         <svg
-                            class="w-3 h-3 rtl:rotate-180 text-white dark:text-white"
+                            class="w-3 h-3 rtl:rotate-180 text-white"
                             aria-hidden="true"
                             xmlns="http://www.w3.org/2000/svg"
                             fill="none"
@@ -373,7 +373,7 @@
                         >
                     </Button>
                     <h3
-                        class="text-lg font-semibold dark:text-white"
+                        class="text-lg font-semibold text-white"
                         aria-live="polite"
                     >
                         {currentMonth.toLocaleString(locale, {
@@ -388,7 +388,7 @@
                         aria-label="Next month"
                     >
                         <svg
-                            class="w-3 h-3 rtl:rotate-180 text-white dark:text-white"
+                            class="w-3 h-3 rtl:rotate-180 text-white"
                             aria-hidden="true"
                             xmlns="http://www.w3.org/2000/svg"
                             fill="none"
@@ -406,7 +406,7 @@
                 <div class="grid grid-cols-7 gap-1" role="grid">
                     {#each weekdays as day}
                         <div
-                            class="text-center text-sm font-medium text-gray-500 dark:text-gray-400"
+                            class="text-center text-sm font-medium text-gray-400"
                             role="columnheader"
                         >
                             {day}
@@ -418,7 +418,7 @@
                             size="sm"
                             class="w-full h-8 {day.getMonth() !==
                             currentMonth.getMonth()
-                                ? 'text-gray-300 dark:text-gray-600'
+                                ? 'text-gray-600'
                                 : ''} {isToday(day)
                                 ? 'font-bold'
                                 : ''} {isInRange(day)