asepharyana
be923cb432
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
1.4 KiB
1.4 KiB
Phase 15c — Theme-Consistent Color System
User: "banyak pewarnaan yg tidak sesuai tema dark mode atau light mode"
Problem
63 hardcoded hex colors (#5e6ad2, #7170ff, #4f46e5, etc.) bypass the CSS
variable theme system in globals.css. These don't adapt between light/dark mode
properly — the dark: variant changes text color but background stays the same.
Color Mapping
#5e6ad2 (indigo-600)
- Light:
--brand: #5e6ad2(same) - Dark:
--brand: #5e6ad2(same) → Replace withvar(--brand)
#4f46e5 (indigo-700)
- Light:
--accent: #4f46e5 - Dark:
--accent: #7170ff→ Replace withvar(--accent)
#7170ff (light blue, dark mode accent)
- Light:
var(--accent)(#4f46e5) - Dark:
var(--accent)(#7170ff) → Replacedark:text-[#7170ff]→dark:text-[var(--accent)]
#6a75e0 (hover lighter)
→ Replace with var(--accent-hover)
/10, /15, /20, /30 opacity tints
bg-[#5e6ad2]/15→bg-[var(--brand)]/15bg-[#5e6ad2]/10→bg-[var(--brand)]/10bg-[#5e6ad2]/30→bg-[var(--brand)]/30
Files to fix
[section]/[...slug]/page.tsx(~16 instances)[section]/page.tsx(~5 instances)components/Sidebar.tsx(2 instances)components/DocForm.tsx(~6 instances)components/CommandMenu.tsx(~6 instances)components/Header.tsx(2 instances)components/McpConfigSnippet.tsx(1 instance)page.tsx(check)