Fix dark mode color contrast on server cert settings page
UX Fix: Dark mode readability Problem: - Warning banner: light yellow background with dark text unreadable in dark mode - Code blocks: light gray background with dark text unreadable in dark mode - User reported: 'warning on darkmode not visible, light yellow background on white text' Solution: - Added @media (prefers-color-scheme: dark) styles - Warning banner: dark background (#664d03), light text (#ffecb5) - Code blocks: dark background (#2b2b2b), light text (#e0e0e0) - Maintains good contrast in both light and dark themes Colors: - Light mode warning: #fff3cd background, #856404 text (WCAG AA compliant) - Dark mode warning: #664d03 background, #ffecb5 text (high contrast) - Light mode code: #f8f9fa background, #212529 text - Dark mode code: #2b2b2b background, #e0e0e0 text Deployment Note: After editing plugins/*/frontend/ files, run: node scripts/stage-frontend.mjs This copies plugin frontends to frontend/src/.plugins-staged/ where Vite reads them (per ADR-013 plugin pruning). Context: - Missed running staging script initially (my error) - Manual copy to .plugins-staged worked but wrong workflow - .plugins-staged/ is .gitignored (generated, not committed) - Proper workflow: edit source -> stage -> Vite hot-reloads Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
@@ -419,6 +419,16 @@ function formatDate(dateString) {
|
||||
border-radius: 4px;
|
||||
padding: 12px;
|
||||
margin-bottom: 16px;
|
||||
color: #856404;
|
||||
}
|
||||
|
||||
/* Dark mode support */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.warning-banner {
|
||||
background: #664d03;
|
||||
border-color: #ffca2c;
|
||||
color: #ffecb5;
|
||||
}
|
||||
}
|
||||
|
||||
.expiry-warning {
|
||||
|
||||
Reference in New Issue
Block a user