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

+2 -2
View File
@@ -61,7 +61,7 @@ export default function TOC({ source }: { source: string }) {
return (
<nav className="text-xs">
<div className="flex items-center gap-2 mb-3 pb-2 border-b border-[var(--border-color)]">
<svg className="w-3.5 h-3.5 text-[#5e6ad2] dark:text-[#7170ff]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<svg className="w-3.5 h-3.5 text-[var(--brand)] dark:text-[var(--accent)]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h7" />
</svg>
<span className="font-semibold uppercase tracking-wider text-[var(--text-muted)] text-[11px]">
@@ -92,7 +92,7 @@ export default function TOC({ source }: { source: string }) {
}}
className={`block py-0.5 transition-colors line-clamp-1 ${
isActive
? "text-[#5e6ad2] dark:text-[#7170ff] font-semibold translate-x-0.5"
? "text-[var(--brand)] dark:text-[var(--accent)] font-semibold translate-x-0.5"
: "text-[var(--text-muted)] hover:text-[var(--text-primary)]"
}`}
title={entry.text}