wibu/desa-darmasaba
1
0
Fork 0
Code Issues Pull Requests 5 Actions Packages Projects Releases Wiki Activity
Files
fix-wa-otp
desa-darmasaba/darkMode.md
nico f0558aa0d0 feat: implement dark mode support for admin layout and components 
- Add dark mode toggle component in admin header
- Integrate dark mode store across admin layout and child components
- Update header, judulList, and judulListTab components with theme tokens
- Add unified typography components for consistent theming
- Implement smooth transitions for dark/light mode switching
- Add mounted state to prevent hydration mismatches
- Style navbar with dark mode aware colors and hover states
- Update button styles with gradient effects for both themes

Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>
2026-02-23 10:48:00 +08:00

3.1 KiB
Raw Permalink Blame History

🌙 Dark Mode Design Specification

Admin Darmasaba – Dashboard & CMS

Dokumen ini mendefinisikan standar Dark Mode UI agar:

  • nyaman di mata
  • konsisten
  • tidak flat
  • tetap profesional untuk aplikasi pemerintahan

🎨 Color Palette (Dark Mode)

Background Layers

Layer Token Warna Fungsi
Base --bg-base #0B1220 Background utama aplikasi
App --bg-app #0F172A Area kerja utama
Card --bg-card #162235 Card / container
Surface --bg-surface #1E2A3D Table header, tab, input

Border & Divider

Token Warna Catatan
--border-default #2A3A52 Border utama
--border-soft #22314A Divider halus

❗ Hindari border terlalu tipis (opacity < 20%)

Text Colors

Jenis Token Warna
Primary --text-primary #E5E7EB
Secondary --text-secondary #9CA3AF
Muted --text-muted #6B7280
Inverse --text-inverse #020617

Accent & Action

Fungsi Warna
Primary Action #3B82F6
Hover #2563EB
Active #1D4ED8
Link #60A5FA

Status Colors

Status Warna
Success #22C55E
Warning #FACC15
Error #EF4444
Info #38BDF8

🧱 Layout Rules

Sidebar

  • Background: --bg-app
  • Active menu:
    • Background: rgba(59,130,246,0.15)
    • Text: Primary
    • Indicator: kiri (2–3px accent bar)
  • Hover:
    • Background: rgba(255,255,255,0.04)

Header / Topbar

  • Background: linear-gradient(#0F172A → #0B1220)
  • Border bawah wajib (--border-soft)
  • Icon:
    • Default: muted
    • Hover: primary

📦 Card & Section

Card

  • Background: --bg-card
  • Border: --border-default
  • Radius: 12–16px
  • Jangan pakai shadow hitam

Section Header

  • Font weight lebih besar
  • Text: primary
  • Spacing jelas dari konten

📊 Table (Dark Mode Friendly)

Table Header

  • Background: --bg-surface
  • Text: secondary
  • Font weight: medium

Table Row

  • Default: transparent
  • Hover:
    • Background: rgba(255,255,255,0.03)
  • Divider antar row wajib terlihat

Link di Table

  • Warna link lebih terang dari text
  • Hover underline

🔘 Button Rules

Primary Button

  • Background: Primary Action
  • Text: Inverse
  • Hover: darker shade

Secondary Button

  • Background: transparent
  • Border: --border-default
  • Text: primary

Icon Button

  • Default: muted
  • Hover: primary + bg soft

🧭 Tab Navigation

  • Inactive:
    • Text: muted
  • Active:
    • Background: rgba(59,130,246,0.15)
    • Text: primary
    • Icon ikut berubah

🌗 Dark vs Light Mode Rule

  • Layout, spacing, typography HARUS SAMA
  • Yang boleh beda:
    • warna
    • border intensity
    • background layer

❌ Jangan ganti struktur UI antara dark & light

✅ Dark Mode Checklist

  • Kontras teks terbaca
  • Active state jelas
  • Hover terasa hidup
  • Tidak flat
  • Tidak silau

Dokumen ini adalah single source of truth untuk Dark Mode.