fix: replace all hardcoded hex colors with CSS theme variables
CI / typecheck + build (push) Canceled after 0s
CI / deploy to VPS (push) Canceled after 0s

Phase 15c — theme-consistent color system:

Replaced 63 instances of hardcoded hex colors (#5e6ad2, #7170ff, #4f46e5,
#6a75e0, #828fff, #94a3b8, etc.) with CSS variables from globals.css:
- #5e6ad2 → var(--brand) (light: #5e6ad2, dark: #5e6ad2)
- #7170ff → var(--accent) (light: #4f46e5, dark: #7170ff)
- #4f46e5 → var(--accent)
- #6a75e0 → var(--brand-hover) (new var, light: #6a75e0, dark: #7170ff)
- #828fff → var(--accent-hover)
- #868686 → var(--text-dim)
- Dark-mode-specific hex in Markdown.tsx → CSS variables

Added --brand-hover CSS variable (light: #6a75e0, dark: #7170ff)
Added dark:prose-invert instead of prose-invert (light mode now uses
default prose theme instead of forced dark)

Files changed: 15 component files + globals.css
This commit is contained in:
asepharyana committed 2026-08-21 13:06:01 +07:00
1 parent ea75d68b1a
commit be923cb432
18 files changed
+149 -105

No files matched your search

+3
View File
@@ -19,6 +19,7 @@
--text-dim: #94a3b8;
--brand: #5e6ad2;
--brand-hover: #6a75e0; /* lighter for hover in light mode */
--accent: #4f46e5;
--accent-hover: #4338ca;
@@ -50,6 +51,7 @@ html.dark {
--text-dim: #62666d;
--brand: #5e6ad2;
--brand-hover: #7170ff; /* lighter for hover in dark mode */
--accent: #7170ff;
--accent-hover: #828fff;
@@ -81,6 +83,7 @@ html.dark {
--color-text-quaternary: var(--text-dim);
--color-brand: var(--brand);
--color-brand-hover: var(--brand-hover);
--color-accent: var(--accent);
--color-accent-hover: var(--accent-hover);
}