From 837e24ce526fc2a9428fde8756514ed040e1c1f8 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Sat, 6 Apr 2024 22:41:35 +0100
Subject: [PATCH] fix input styles in dark mode

---
 components/Input/Input.module.css   | 12 +++++++++++-
 components/Select/Select.module.css | 12 +++++++++++-
 2 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/components/Input/Input.module.css b/components/Input/Input.module.css
index b4250c8..95901b6 100644
--- a/components/Input/Input.module.css
+++ b/components/Input/Input.module.css
@@ -9,7 +9,17 @@
   background-color: rgba(var(--background-rgb), 0.1);
 }
 
-.input:focus-within {
+.input:focus {
   outline: none;
   background-color: rgba(var(--background-rgb), 0.3);
 }
+
+@media (prefers-color-scheme: dark) {
+  .input:hover {
+    background-color: rgba(var(--foreground-rgb), 0.05);
+  }
+
+  .input:focus {
+    background-color: rgba(var(--foreground-rgb), 0.2);
+  }
+}
diff --git a/components/Select/Select.module.css b/components/Select/Select.module.css
index 10ff848..7125e51 100644
--- a/components/Select/Select.module.css
+++ b/components/Select/Select.module.css
@@ -12,11 +12,21 @@
   background-color: rgba(var(--background-rgb), 0.1);
 }
 
-.select:focus-within {
+.select:focus:not(.select[disabled]) {
   outline: none;
   background-color: rgba(var(--background-rgb), 0.3);
 }
 
+@media (prefers-color-scheme: dark) {
+  .select:hover:not(.select[disabled]) {
+    background-color: rgba(var(--foreground-rgb), 0.05);
+  }
+
+  .select:focus:not(.select[disabled]) {
+    background-color: rgba(var(--foreground-rgb), 0.2);
+  }
+}
+
 .icon {
   position: absolute;
   right: 0.1rem;