43 lines
1.4 KiB
Markdown
43 lines
1.4 KiB
Markdown
|
# 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 with `var(--brand)`
|
||
|
|
|
||
|
|
### `#4f46e5` (indigo-700)
|
||
|
|
- Light: `--accent: #4f46e5`
|
||
|
|
- Dark: `--accent: #7170ff`
|
||
|
|
→ Replace with `var(--accent)`
|
||
|
|
|
||
|
|
### `#7170ff` (light blue, dark mode accent)
|
||
|
|
- Light: `var(--accent)` (#4f46e5)
|
||
|
|
- Dark: `var(--accent)` (#7170ff)
|
||
|
|
→ Replace `dark: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)]/15`
|
||
|
|
- `bg-[#5e6ad2]/10` → `bg-[var(--brand)]/10`
|
||
|
|
- `bg-[#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)
|