Panduan implementasi dark mode dengan Claude Code

Mulai dari risiko produk

Panduan implementasi dark mode dengan Claude Code bukan sekadar meminta Claude Code membuat layar lebih menarik. Tujuannya adalah memperbaiki interface nyata tanpa merusak conversion, keterbacaan, aksesibilitas, dan tampilan mobile. Di produksi, empty state, loading, error, keyboard focus, teks panjang, slot iklan, code block, dan posisi CTA sangat menentukan.

Baca juga claude code design system, claude code accessibility, claude code code review. Referensi resmi: Claude Code docs, MDN prefers-color-scheme, MDN color-scheme, WCAG contrast. Prompt untuk Claude Code harus menjelaskan tujuan, batas perubahan, use case, pitfall, dan cara verifikasi.

Prompt yang disarankan

Implementasikan perbaikan ini dengan perubahan aman paling kecil.
Hormati komponen, design token, dan routing yang sudah ada.
Cakup use case, pitfall, aksesibilitas, tampilan mobile, dan failure state.
Kembalikan kode yang bisa disalin serta review checklist.

Use case checklist

1. Landing page dan artikel, saat pembaca perlu menemukan langkah berikutnya tanpa merasa terganggu.
2. Dashboard SaaS dengan loading, empty data, error, dan success state.
3. Checkout, signup, dan konsultasi, saat tombol utama harus tetap jelas.
4. Review tim, ketika Claude Code harus memberi kode sekaligus kriteria pengecekan.

Kode implementasi

:root {
  color-scheme: light;
  --color-page: #ffffff;
  --color-surface: #f8fafc;
  --color-text: #0f172a;
  --color-muted: #475569;
  --color-border: #dbe3ef;
  --color-link: #2563eb;
  --color-focus: #f59e0b;
}

[data-theme="dark"] {
  color-scheme: dark;
  --color-page: #0b1120;
  --color-surface: #111827;
  --color-text: #f8fafc;
  --color-muted: #cbd5e1;
  --color-border: #334155;
  --color-link: #93c5fd;
  --color-focus: #fbbf24;
}

body {
  background: var(--color-page);
  color: var(--color-text);
}

:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
}

const storageKey = "theme";
const root = document.documentElement;
const stored = localStorage.getItem(storageKey);
const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
const theme = stored === "light" || stored === "dark" ? stored : prefersDark ? "dark" : "light";

root.dataset.theme = theme;

type Theme = "light" | "dark" | "system";

export function ThemeToggle({ value, onChange }: { value: Theme; onChange: (theme: Theme) => void }) {
  return (
    <fieldset aria-label="Theme">
      {(["light", "dark", "system"] as const).map((theme) => (
        <button
          key={theme}
          type="button"
          aria-pressed={value === theme}
          onClick={() => onChange(theme)}
        >
          {theme}
        </button>
      ))}
    </fieldset>
  );
}

Pitfall checklist

• Mengoptimalkan hanya untuk screenshot bisa merusak alur pengguna nyata.
• Mengandalkan warna atau gerakan saja akan menurunkan aksesibilitas.
• Tidak mengecek lebar 375px dapat membuat horizontal scroll.
• Mengabaikan data kosong, label panjang, jaringan lambat, dan reload memicu bug produksi.
• Membiarkan Claude Code mengubah file tidak terkait membuat review mahal.

Verifikasi

Setelah implementasi, minta Claude Code melakukan review pass terpisah. Minta daftar file berubah, risiko, browser check, dan manual check. Lalu buka mobile width dan cek overflow, scroll code block, CTA, focus style, dan teks bantuan.

Sudut monetisasi

Topik ini memengaruhi iklan, kartu produk, link konsultasi, tabel harga, dan lead form. Untuk menerapkannya di repository nyata, halaman training dan konsultasi Claude Code membantu membuat workflow berulang.

Catatan uji praktik

Saya mengujinya dalam tiga langkah: implementasi, review, dan pengecekan mobile. Diff lebih kecil daripada redesign besar, dan masalah layout serta aksesibilitas terlihat sebelum deploy.

Catatan review tambahan

• Bandingkan screenshot sebelum/sesudah dan cek CTA, iklan, teks, form, dan code block.
• Tanyakan ke Claude Code apa yang bisa dihapus, nama apa yang tidak cocok, dan asumsi apa yang berisiko.
• Sebelum deploy, uji mobile, desktop, keyboard, jaringan lambat, data kosong, dan reload.

Catatan review tambahan

• Bandingkan screenshot sebelum/sesudah dan cek CTA, iklan, teks, form, dan code block.
• Tanyakan ke Claude Code apa yang bisa dihapus, nama apa yang tidak cocok, dan asumsi apa yang berisiko.
• Sebelum deploy, uji mobile, desktop, keyboard, jaringan lambat, data kosong, dan reload.

Catatan review tambahan

• Bandingkan screenshot sebelum/sesudah dan cek CTA, iklan, teks, form, dan code block.
• Tanyakan ke Claude Code apa yang bisa dihapus, nama apa yang tidak cocok, dan asumsi apa yang berisiko.
• Sebelum deploy, uji mobile, desktop, keyboard, jaringan lambat, data kosong, dan reload.