alex/headquarter
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: dark mode theme switching and styling

Browse Source 
- Apply theme immediately when saving settings (fixes theme not updating)
- Add dark mode CSS variables for success/warning/danger/info colors
- Fix shell-header background for dark mode
- Fix URL validation styles to use CSS variables
- Add explicit background/color to form inputs for dark mode support
- Quality gates: typecheck OK, lint OK, build OK
This commit is contained in:
Fusion
2026-05-19 23:13:10 +02:00
parent 94aa88c154
commit 461cb30b28
2 changed files with 33 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/pages/settings.tsx
+9
View File
@@ -53,6 +53,15 @@ export const SettingsPage = () => {
const updated = await updateUserConfig(update); const updated = await updateUserConfig(update);
setConfig(updated); setConfig(updated);
setSaveStatus("saved"); setSaveStatus("saved");
// Apply theme immediately
const theme = updated.theme ?? "system";
if (theme === "system") {
document.documentElement.removeAttribute("data-theme");
} else {
document.documentElement.setAttribute("data-theme", theme);
}
setTimeout(() => setSaveStatus("idle"), 2000); setTimeout(() => setSaveStatus("idle"), 2000);
} catch { } catch {
setSaveStatus("error"); setSaveStatus("error");
apps/web/src/styles.css
+24 -9
View File
@@ -43,6 +43,14 @@
--brand: #4a9e7f; --brand: #4a9e7f;
--brand-strong: #3d8a6e; --brand-strong: #3d8a6e;
--border: #3d3d38; --border: #3d3d38;
--success: #22c55e;
--success-light: rgba(34, 197, 94, 0.15);
--warning: #f59e0b;
--warning-light: rgba(245, 158, 11, 0.15);
--danger: #ef4444;
--danger-light: rgba(239, 68, 68, 0.15);
--info: #3b82f6;
--info-light: rgba(59, 130, 246, 0.15);
} }
* { * {
@@ -80,6 +88,10 @@ a {
backdrop-filter: blur(7px); backdrop-filter: blur(7px);
} }
[data-theme="dark"] .shell-header {
background: rgba(37, 37, 34, 0.85);
}
.brand { .brand {
font-weight: 700; font-weight: 700;
letter-spacing: 0.02em; letter-spacing: 0.02em;
@@ -366,11 +378,14 @@ a {
} }
.form-field input, .form-field input,
.form-field textarea { .form-field textarea,
.form-field select {
padding: 0.55rem 0.7rem; padding: 0.55rem 0.7rem;
border: 1px solid var(--border); border: 1px solid var(--border);
border-radius: 10px; border-radius: 10px;
font: inherit; font: inherit;
background: var(--panel);
color: var(--ink);
} }
.dialog-actions { .dialog-actions {
@@ -469,18 +484,18 @@ a {
/* URL Validation Styles */ /* URL Validation Styles */
.valid-url { .valid-url {
border-color: #16a34a !important; border-color: var(--success, #16a34a) !important;
background-color: #f0fdf4 !important; background-color: var(--success-light, #f0fdf4) !important;
} }
.needs-parsing-url { .needs-parsing-url {
border-color: #ca8a04 !important; border-color: var(--warning, #ca8a04) !important;
background-color: #fefce8 !important; background-color: var(--warning-light, #fefce8) !important;
} }
.invalid-url { .invalid-url {
border-color: #dc2626 !important; border-color: var(--danger, #dc2626) !important;
background-color: #fef2f2 !important; background-color: var(--danger-light, #fef2f2) !important;
} }
.validation-status { .validation-status {
@@ -490,11 +505,11 @@ a {
} }
.validation-status.valid { .validation-status.valid {
color: #16a34a; color: var(--success, #16a34a);
} }
.validation-status.warning { .validation-status.warning {
color: #ca8a04; color: var(--warning, #ca8a04);
} }
.validation-status.invalid { .validation-status.invalid {