From fa6420d14912a2096f8f4efbb4caf7edc47b8989 Mon Sep 17 00:00:00 2001 From: Joerg Date: Fri, 23 Jan 2026 18:57:50 +0100 Subject: [PATCH] fix: use CSS variables for dark mode support in settings page Replace hard-coded colors with CSS variables from the theme system to properly support both light and dark modes. Also add proper input styling and strong tag emphasis colors. Co-Authored-By: Claude --- src/frontend/src/routes/settings/+page.svelte | 105 ++++++++++-------- 1 file changed, 57 insertions(+), 48 deletions(-) diff --git a/src/frontend/src/routes/settings/+page.svelte b/src/frontend/src/routes/settings/+page.svelte index b31d574..98eafb8 100644 --- a/src/frontend/src/routes/settings/+page.svelte +++ b/src/frontend/src/routes/settings/+page.svelte @@ -440,40 +440,46 @@ .header h1 { margin: 0; - color: #333; + color: var(--text-primary); } .back-button { padding: 0.5rem 1rem; - background-color: #6c757d; - color: white; + background-color: var(--color-secondary); + color: var(--text-inverted); text-decoration: none; - border-radius: 4px; + border-radius: var(--border-radius); font-size: 0.9rem; font-weight: 500; transition: background-color 0.2s; } .back-button:hover { - background-color: #5a6268; + background-color: var(--color-secondary-hover); } .user-info { - background: #f8f9fa; + background: var(--bg-secondary); padding: 1.5rem; - border-radius: 8px; + border-radius: var(--border-radius-lg); margin-bottom: 2rem; } .user-info h2 { margin: 0 0 1rem 0; font-size: 1.25rem; - color: #333; + color: var(--text-primary); } .user-info p { margin: 0.5rem 0; - color: #666; + color: var(--text-secondary); + } + + .user-info :global(strong), + .settings-form :global(strong), + .next-sync-info :global(strong) { + color: var(--text-primary); } .settings-section { @@ -483,44 +489,44 @@ .settings-section h2 { margin: 0 0 0.5rem 0; font-size: 1.25rem; - color: #333; + color: var(--text-primary); } .help-text { - color: #666; + color: var(--text-secondary); margin-bottom: 1.5rem; line-height: 1.6; } .alert { padding: 1rem; - border-radius: 4px; + border-radius: var(--border-radius); margin-bottom: 1.5rem; } .alert-info { - background-color: #d1ecf1; - border: 1px solid #bee5eb; - color: #0c5460; + background-color: var(--color-info-bg); + border: 1px solid var(--color-info); + color: var(--color-info-text); } .alert-error { - background-color: #f8d7da; - border: 1px solid #f5c6cb; - color: #721c24; + background-color: var(--color-error-bg); + border: 1px solid var(--color-error); + color: var(--color-error-text); } .alert-success { - background-color: #d4edda; - border: 1px solid #c3e6cb; - color: #155724; + background-color: var(--color-success-bg); + border: 1px solid var(--color-success); + color: var(--color-success); } .settings-form { - background: white; + background: var(--bg-card); padding: 2rem; - border: 1px solid #e0e0e0; - border-radius: 8px; + border: 1px solid var(--border-color); + border-radius: var(--border-radius-lg); margin-bottom: 2rem; } @@ -532,34 +538,36 @@ display: block; margin-bottom: 0.5rem; font-weight: 500; - color: #333; + color: var(--text-primary); } .form-group input { width: 100%; padding: 0.75rem; - border: 1px solid #ddd; - border-radius: 4px; + border: 1px solid var(--border-color); + border-radius: var(--border-radius); font-size: 1rem; + background: var(--bg-input); + color: var(--text-primary); box-sizing: border-box; } .form-group input:focus { outline: none; - border-color: #4a90e2; - box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.1); + border-color: var(--color-primary); + box-shadow: var(--focus-ring); } .hint { font-size: 0.875rem; - color: #666; + color: var(--text-secondary); margin-top: 0.5rem; } .btn { padding: 0.75rem 1.5rem; border: none; - border-radius: 4px; + border-radius: var(--border-radius); font-size: 1rem; font-weight: 500; cursor: pointer; @@ -567,12 +575,12 @@ } .btn-primary { - background-color: #4a90e2; - color: white; + background-color: var(--color-primary); + color: var(--text-inverted); } .btn-primary:hover:not(:disabled) { - background-color: #357abd; + background-color: var(--color-primary-hover); } .btn-primary:disabled { @@ -581,34 +589,34 @@ } .btn-secondary { - background-color: #6c757d; - color: white; + background-color: var(--color-secondary); + color: var(--text-inverted); } .btn-secondary:hover { - background-color: #5a6268; + background-color: var(--color-secondary-hover); } .info-box { - background: #e8f4fd; - border-left: 4px solid #4a90e2; + background: var(--color-info-bg); + border-left: 4px solid var(--color-primary); padding: 1.5rem; - border-radius: 4px; + border-radius: var(--border-radius); } .info-box h3 { margin: 0 0 1rem 0; - color: #333; + color: var(--text-primary); } .info-box p { margin: 0.5rem 0; - color: #666; + color: var(--text-secondary); line-height: 1.6; } .info-box a { - color: #4a90e2; + color: var(--text-link); text-decoration: none; } @@ -634,6 +642,7 @@ gap: 0.5rem; font-weight: 500; cursor: pointer; + color: var(--text-primary); } .checkbox-group input[type="checkbox"] { @@ -649,18 +658,18 @@ .divider { border: none; - border-top: 1px solid #e0e0e0; + border-top: 1px solid var(--border-color); margin: 2rem 0; } .next-sync-info { padding: 0.75rem 1rem; - background-color: #e3f2fd; - border-left: 4px solid #4a90e2; - border-radius: 4px; + background-color: var(--color-info-bg); + border-left: 4px solid var(--color-primary); + border-radius: var(--border-radius); margin-top: 1rem; font-size: 0.9rem; - color: #333; + color: var(--text-primary); } @media (max-width: 640px) {