improve some elements for dark mode (#609)

docs/src/tailwind.css

@@ -24,6 +24,8 @@
     --input-border-focus: 148, 163, 184;
     --input-ring: 148, 163, 184;
 
+    --toggle-active: 75, 85, 99;
+
     --menu-background: 30, 32, 40;
     --menu-item-background-hover: 55, 65, 81;
     --menu-item-background-focus: 75, 85, 99;
@@ -52,6 +54,8 @@
     --input-border-focus: 36, 39, 52;
     --input-ring: 148, 163, 184;
 
+    --toggle-active: 36, 39, 52;
+
     --menu-background: 255, 255, 255;
     --menu-item-background-hover: 243, 244, 246;
     --menu-item-background-focus: 229, 231, 235;

web/src/css/app.css

@@ -24,6 +24,7 @@
     --color-input-border: rgba(var(--input-border));
     --color-input-border-focus: rgba(var(--input-border-focus));
     --color-input-ring: rgba(var(--input-ring));
+    --color-toggle-active: rgba(var(--toggle-active));
     --color-menu-background: rgba(var(--menu-background));
     --color-menu-item-background-hover: rgba(var(--menu-item-background-hover));
     --color-menu-item-background-focus: rgba(var(--menu-item-background-focus));

web/src/css/theme.css

@@ -16,6 +16,8 @@
     --input-border-focus: 36, 39, 52;
     --input-ring: 148, 163, 184;
 
+    --toggle-active: 36, 39, 52;
+
     --menu-background: 255, 255, 255;
     --menu-item-background-hover: 243, 244, 246;
     --menu-item-background-focus: 229, 231, 235;
@@ -46,6 +48,8 @@
     --input-border-focus: 148, 163, 184;
     --input-ring: 148, 163, 184;
 
+    --toggle-active: 75, 85, 99;
+
     --menu-background: 30, 32, 40;
     --menu-item-background-hover: 55, 65, 81;
     --menu-item-background-focus: 75, 85, 99;

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

@@ -28,7 +28,7 @@
     <div class="flex items-center gap-2">
         <input
             {name}
-            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"
+            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 dark:[color-scheme:dark]"
             class:border-red-400={(error?.length ?? 0) > 0}
             class:bg-input-background-error={(error?.length ?? 0) > 0}
             type="date"

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

@@ -39,7 +39,7 @@
             onchange={handleToggleChange}
         />
         <div
-            class="w-11 h-6 bg-input-background border border-input-border peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-input-ring 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-primary"
+            class="w-11 h-6 bg-input-background border border-input-border peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-input-ring 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-toggle-active"
         ></div>
         {#if label}
             <span class="ms-3 text-sm font-medium">{label}</span>