adds dark mode

web/src/lib/components/base/dropdown.svelte

@@ -36,19 +36,17 @@
 
 <div class="dropdown relative">
     <button
-        class="flex items-center justify-center"
+        class="btn-icon flex items-center justify-center"
         on:click={toggleMenu}
         type="button"
     >
         <slot>
-            <i
-                class="fa fa-ellipsis-vertical text-{size} hover:bg-gray-300 hover:bg-opacity-50 px-[14px] py-2 rounded-full"
-            ></i>
+            <i class="fa fa-ellipsis-vertical text-{size}"></i>
         </slot>
     </button>
     {#if isOpen}
         <ul
-            class="menu absolute bg-white border rounded-l-xl rounded-b-xl shadow-md right-0 overflow-hidden text-black mt-1"
+            class="menu absolute bg-menu-background border border-input-border rounded-l-xl rounded-b-xl shadow-md right-0 overflow-hidden mt-2"
             class:none={isOpen}
             style="z-index: 1001"
         >
@@ -56,7 +54,7 @@
                 <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
                 <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
                 <li
-                    class="menu-item flex items-center px-4 py-3 cursor-pointer hover:bg-gray-100 focus:bg-gray-200 transition-colors"
+                    class="menu-item flex items-center px-4 py-3 cursor-pointer hover:bg-menu-item-background-hover focus:bg-menu-item-background-focus transition-colors"
                     tabindex="0"
                     on:mouseup|stopPropagation={() => handleItemClick(item)}
                     on:keydown|stopPropagation={() => handleItemClick(item)}

web/src/lib/components/base/modal.svelte

@@ -28,7 +28,7 @@
             </h3>
             <button
                 type="button"
-                class="rounded-full py-1 px-[10px] hover:bg-gray-100 focus:ring-4 ring-gray-200 transition-colors"
+                class="rounded-full btn-icon"
                 on:click={closeModal}
             >
                 <i class="fa fa-close"></i>

web/src/lib/components/base/radio_group.svelte

@@ -17,7 +17,7 @@
 
     function handleRadioChange(radioIndex: number) {
         selected = radioIndex;
-        dispatch('change', items[selected])
+        dispatch("change", items[selected]);
     }
 </script>
 
@@ -29,13 +29,9 @@
             type="radio"
             checked={i == selected}
             value={item.value}
-            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={() => handleRadioChange(i)}
         />
-        <label
-            for="{name}-radio-{i}"
-            class="ms-2 text-sm text-gray-900 dark:text-gray-300"
-            >{item.text}</label
-        >
+        <label for="{name}-radio-{i}" class="ms-2 text-sm">{item.text}</label>
     </div>
 {/each}

web/src/lib/components/base/search.svelte

@@ -54,13 +54,13 @@
     }
 </script>
 
-<div class="relative text-gray-600 {extraClasses}">
+<div class="relative {extraClasses}">
     <span class="absolute top-1/2 -translate-y-1/2 left-0 pl-4">
         <i class="fa fa-search" class:text-xl={large}></i>
     </span>
     {#if value.length > 0}
         <button
-            class="absolute top-1/2 -translate-y-1/2 right-0 h-6 w-6 mr-2 hover:bg-gray-300 hover:bg-opacity-50 rounded-full"
+            class="btn-icon absolute top-1/2 -translate-y-1/2 right-0 mr-2"
             on:click={clear}
             in:fade={{ duration: 150 }}
             out:fade={{ duration: 150 }}
@@ -84,7 +84,7 @@
 
     {#if dropDownOpen}
         <ul
-            class="menu absolute bg-white border rounded-xl shadow-md overflow-hidden text-black w-full"
+            class="menu absolute bg-menu-background border border-input-border rounded-xl shadow-md overflow-hidden w-full"
             class:none={!dropDownOpen}
             style="z-index: 1001"
         >
@@ -92,7 +92,7 @@
                 <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
                 <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
                 <li
-                    class="menu-item flex items-center px-4 py-3 cursor-pointer hover:bg-gray-100 focus:bg-gray-200 transition-colors"
+                    class="menu-item flex items-center px-4 py-3 cursor-pointer hover:bg-menu-item-background-hover focus:bg-menu-item-background-focus transition-colors"
                     tabindex="0"
                     on:mousedown|stopPropagation={() => handleItemClick(item)}
                     on:keydown|stopPropagation={() => handleItemClick(item)}

web/src/lib/components/base/select.svelte

@@ -29,7 +29,7 @@
     {/if}
     <select
         {name}
-        class="bg-gray-50 h-10 w-full px-4 border-r-8 border-transparent outline outline-1 outline-gray-200 rounded-md focus:outline-primary transition-colors"
+        class="bg-input-background h-10 w-full px-4 border-r-8 border-transparent outline outline-1 outline-input-border rounded-md focus:outline-input-border-focus transition-colors"
         bind:value
         on:change={(e) => onChange(e.target)}
     >

web/src/lib/components/base/slider.svelte

@@ -37,6 +37,9 @@
 <div class="my-4" id="slider" bind:this={sliderContainer}></div>
 
 <style>
+    :global(.noUi-target) {
+        @apply border border-input-border shadow-none;
+    }
     :global(.noUi-horizontal) {
         height: 6px;
     }

web/src/lib/components/base/text_field.svelte

@@ -7,7 +7,7 @@
     export let icon: string = "";
     export let extraClasses: string = "";
     export let type: "text" | "password" | "search" = "text";
-    export let autocomplete: "on" | "off" = "on"
+    export let autocomplete: "on" | "off" = "on";
     function typeAction(node: HTMLInputElement) {
         node.type = type;
     }
@@ -25,7 +25,7 @@
         {/if}
         <input
             {name}
-            class="bg-gray-50 border rounded-md p-3 transition-colors focus:border-primary focus:outline-none focus:ring-0 w-full {extraClasses}"
+            class="bg-input-background border border-input-border rounded-md p-3 transition-colors focus:border-input-border-focus focus:outline-none focus:ring-0 w-full {extraClasses}"
             class:border-red-400={error.length > 0}
             class:bg-red-50={error.length > 0}
             {autocomplete}

web/src/lib/components/base/textarea.svelte

@@ -15,7 +15,7 @@
     {/if}
     <textarea
         {name}
-        class="bg-gray-50 border rounded-md p-3 resize-none transition-colors focus:border-primary focus:outline-none focus:ring-0 w-full"
+        class="bg-input-background border border-input-border rounded-md p-3 resize-none transition-colors focus:border-input-border-focus focus:outline-none focus:ring-0 w-full"
         {rows}
         {placeholder}
         class:border-red-400={error.length > 0}

web/src/lib/components/base/toggle.svelte

@@ -6,9 +6,15 @@
 </script>
 
 <label class="relative my-2 inline-flex items-center cursor-pointer">
-    <input {name} bind:checked={value} type="checkbox" class="sr-only peer" value="1"/>
+    <input
+        {name}
+        bind:checked={value}
+        type="checkbox"
+        class="sr-only peer"
+        value="1"
+    />
     <div
-        class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-gray-400 rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-primary"
+        class="w-11 h-6 bg-input-background peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-input-border-focus rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-input-background"
     ></div>
     <span class="ms-3 text-sm font-medium">{label}</span>
 </label>