From 13702d8c308d4957d2e80b3ea624e99b808352de Mon Sep 17 00:00:00 2001
From: Connor Johnstone <connor.johnstone@arcfield.com>
Date: Fri, 26 Sep 2025 10:40:49 -0400
Subject: [PATCH] Add theme-aware styling for date and time picker icons
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The calendar and clock icons in date/time input fields were showing as black regardless of theme, making them hard to see on dark themes.

Changes:
- Add --calendar-picker-filter CSS variable to control icon appearance
- Set filter to none for light themes (keep default black icons)
- Set filter to invert(1) brightness(0.9) for all dark themes
- Apply styling to ::-webkit-calendar-picker-indicator and ::-moz-calendar-picker-indicator
- Cover all dark themes: dark, midnight, charcoal, nord, dracula

The date/time picker icons now properly invert to white/light colors on dark themes while remaining black on light themes.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 frontend/styles.css | 24 +++++++++++++++++++++++-
 1 file changed, 23 insertions(+), 1 deletion(-)

diff --git a/frontend/styles.css b/frontend/styles.css
index df72328..625a3b4 100644
--- a/frontend/styles.css
+++ b/frontend/styles.css
@@ -40,6 +40,7 @@
     --text-inverse: #ffffff;
     --border-primary: #e9ecef;
     --border-secondary: #dee2e6;
+    --calendar-picker-filter: none; /* Date/time picker icons stay default (black) for light theme */
     --border-light: #f8f9fa;
     --error-color: #dc3545;
     --success-color: #28a745;
@@ -148,7 +149,7 @@ input, select, textarea, button {
 [data-theme="dark"] {
     --primary-color: #374151;
     --primary-gradient: linear-gradient(135deg, #374151 0%, #1f2937 100%);
-    
+
     /* Dark Theme Overrides */
     --background-primary: #111827;
     --background-secondary: #1f2937;
@@ -159,6 +160,7 @@ input, select, textarea, button {
     --border-primary: #374151;
     --border-secondary: #4b5563;
     --border-light: #6b7280;
+    --calendar-picker-filter: invert(1) brightness(0.9); /* Invert calendar/clock icons for dark theme */
     
     /* Modal Colors - Dark */
     --modal-background: #1f2937;
@@ -201,21 +203,25 @@ input, select, textarea, button {
 [data-theme="midnight"] {
     --primary-color: #4c9aff;
     --primary-gradient: linear-gradient(135deg, #0f1419 0%, #151b26 100%);
+    --calendar-picker-filter: invert(1) brightness(0.9);
 }
 
 [data-theme="charcoal"] {
     --primary-color: #4ade80;
     --primary-gradient: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
+    --calendar-picker-filter: invert(1) brightness(0.9);
 }
 
 [data-theme="nord"] {
     --primary-color: #88c0d0;
     --primary-gradient: linear-gradient(135deg, #2e3440 0%, #3b4252 100%);
+    --calendar-picker-filter: invert(1) brightness(0.9);
 }
 
 [data-theme="dracula"] {
     --primary-color: #bd93f9;
     --primary-gradient: linear-gradient(135deg, #282a36 0%, #44475a 100%);
+    --calendar-picker-filter: invert(1) brightness(0.9);
 }* {
     margin: 0;
     padding: 0;
@@ -947,6 +953,22 @@ body {
     cursor: not-allowed;
 }
 
+/* Style date and time picker icons to be theme-aware */
+input[type="date"]::-webkit-calendar-picker-indicator,
+input[type="time"]::-webkit-calendar-picker-indicator,
+input[type="datetime-local"]::-webkit-calendar-picker-indicator {
+    filter: var(--calendar-picker-filter, none);
+    cursor: pointer;
+}
+
+/* Firefox date/time picker icon styling */
+input[type="date"]::-moz-calendar-picker-indicator,
+input[type="time"]::-moz-calendar-picker-indicator,
+input[type="datetime-local"]::-moz-calendar-picker-indicator {
+    filter: var(--calendar-picker-filter, none);
+    cursor: pointer;
+}
+
 .input-with-checkbox {
     display: flex;
     align-items: center;