updated: dark theme

1 files changed, 7 insertions, 7 deletions

diff --git a/src/components/Password.svelte b/src/components/Password.svelte
index da65d718..81714904 100644
--- a/src/components/Password.svelte
+++ b/src/components/Password.svelte
@@ -23,10 +23,10 @@
 </script>
 
 <div
-  class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-20"
+  class="fixed inset-0 bg-gray-600 dark:bg-stone-950 dark:bg-opacity-90 bg-opacity-50 overflow-y-auto h-full w-full z-20"
 >
   <div
-    class="relative top-1/3 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white space-y-5"
+    class="relative top-1/3 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white dark:bg-stone-800 dark:border-0 space-y-5"
   >
     <h1 class="text-center text-2xl font-semibold">
       Please enter your password
@@ -38,7 +38,7 @@
             name="password"
             type="text"
             required
-            class="bg-primary"
+            class="bg-primary dark:bg-stone-700 dark:border-gray-50"
             bind:value={password}
             autocapitalize="none"
             use:focus
@@ -48,7 +48,7 @@
             name="password"
             type="password"
             required
-            class="bg-primary"
+            class="bg-primary dark:bg-stone-700 dark:border-gray-50"
             bind:value={password}
             autocapitalize="none"
             use:focus
@@ -57,7 +57,7 @@
         <button
           type="button"
           on:click={() => (revealPassword = !revealPassword)}
-          class="absolute right-5 top-6"
+          class="absolute right-5 dark:invert {revealPassword ? 'top-[18px]' : 'top-[16px]'}"
         >
           <Icon icon={revealPassword ? "eye" : "eye-off"} />
         </button>
@@ -65,7 +65,7 @@
       <div class="w-full flex">
         <button
           type="button"
-          class="border-2 border-black rounded-xl font-semibold mx-auto py-3 w-40 hover:opacity-80 mx-auto"
+          class="border-2 border-black dark:border-gray-50 dark:text-gray-50 rounded-xl font-semibold py-3 w-40 hover:opacity-80 mx-auto"
           on:click={cancel}
           on:keydown={cancel}
         >
@@ -73,7 +73,7 @@
         </button>
         <button
           type="submit"
-          class="border-2 border-black rounded-xl font-semibold mx-auto py-3 w-40 hover:opacity-80 mx-auto"
+          class="border-2 border-black dark:border-gray-50 bg-black text-white dark:bg-gray-50 dark:text-black rounded-xl font-semibold py-3 w-40 hover:opacity-80 mx-auto"
         >
           <div class="my-auto">Submit</div>
         </button>