fix(web): dark mode for collapsible config section headers (#246)

* fix(web): add dark mode overrides for collapsible config section headers

The collapsible section headers in plugin config schemas used bg-gray-100
and hover:bg-gray-200 which had no dark mode overrides, resulting in light
text on a light background when dark mode was active.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* fix(web): add missing bg-gray-100 light-mode utility class

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

---------

Co-authored-by: Chuck <chuck@example.com>
Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Chuck
2026-02-13 15:50:34 -05:00
committed by GitHub
parent 82370a0253
commit 51616f1bc4

View File

@@ -66,6 +66,7 @@
/* Dark Mode - Utility Class Overrides */ /* Dark Mode - Utility Class Overrides */
[data-theme="dark"] .bg-white { background-color: var(--color-surface); } [data-theme="dark"] .bg-white { background-color: var(--color-surface); }
[data-theme="dark"] .bg-gray-50 { background-color: var(--color-background); } [data-theme="dark"] .bg-gray-50 { background-color: var(--color-background); }
[data-theme="dark"] .bg-gray-100 { background-color: var(--color-surface); }
[data-theme="dark"] .bg-gray-200 { background-color: var(--color-border); } [data-theme="dark"] .bg-gray-200 { background-color: var(--color-border); }
[data-theme="dark"] .text-gray-900 { color: var(--color-text-primary); } [data-theme="dark"] .text-gray-900 { color: var(--color-text-primary); }
@@ -79,6 +80,7 @@
[data-theme="dark"] .border-gray-300 { border-color: #4b5563; } [data-theme="dark"] .border-gray-300 { border-color: #4b5563; }
[data-theme="dark"] .hover\:bg-gray-50:hover { background-color: var(--color-border); } [data-theme="dark"] .hover\:bg-gray-50:hover { background-color: var(--color-border); }
[data-theme="dark"] .hover\:bg-gray-200:hover { background-color: #4b5563; }
[data-theme="dark"] .hover\:text-gray-700:hover { color: #e5e7eb; } [data-theme="dark"] .hover\:text-gray-700:hover { color: #e5e7eb; }
[data-theme="dark"] .hover\:border-gray-300:hover { border-color: #6b7280; } [data-theme="dark"] .hover\:border-gray-300:hover { border-color: #6b7280; }
@@ -100,6 +102,7 @@ body {
/* Utility classes */ /* Utility classes */
.bg-gray-50 { background-color: #f9fafb; } .bg-gray-50 { background-color: #f9fafb; }
.bg-gray-100 { background-color: #f3f4f6; }
.bg-white { background-color: #ffffff; } .bg-white { background-color: #ffffff; }
.bg-gray-800 { background-color: #1f2937; } .bg-gray-800 { background-color: #1f2937; }
.bg-gray-900 { background-color: #111827; } .bg-gray-900 { background-color: #111827; }