From 03ef547a759558d07aa55bcf1919bdec89568e65 Mon Sep 17 00:00:00 2001
From: slothful-vassal <89943360+slothful-vassal@users.noreply.github.com>
Date: Sat, 4 Oct 2025 14:38:27 +0200
Subject: [PATCH] improve some elements for dark mode (#609)

---
 docs/src/tailwind.css                         | 4 ++++
 web/src/css/app.css                           | 1 +
 web/src/css/theme.css                         | 4 ++++
 web/src/lib/components/base/datepicker.svelte | 2 +-
 web/src/lib/components/base/toggle.svelte     | 2 +-
 5 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/docs/src/tailwind.css b/docs/src/tailwind.css
index d76d7352..9c8f925a 100644
--- a/docs/src/tailwind.css
+++ b/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;
diff --git a/web/src/css/app.css b/web/src/css/app.css
index 1dc90180..d858236d 100644
--- a/web/src/css/app.css
+++ b/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));
diff --git a/web/src/css/theme.css b/web/src/css/theme.css
index 9aa6853f..db19872e 100644
--- a/web/src/css/theme.css
+++ b/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;
diff --git a/web/src/lib/components/base/datepicker.svelte b/web/src/lib/components/base/datepicker.svelte
index bb47d6af..2b07fec7 100644
--- a/web/src/lib/components/base/datepicker.svelte
+++ b/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"
diff --git a/web/src/lib/components/base/toggle.svelte b/web/src/lib/components/base/toggle.svelte
index 6baeb2e1..e749fdc6 100644
--- a/web/src/lib/components/base/toggle.svelte
+++ b/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>