dark:@custom-variantScoped demo

Dark Mode

Strategi class-based dark mode, demo ter-scope, dan keputusan situs ini yang light-only.

Strategi class, bukan hanya media query

Secara default dark: mengikuti prefers-color-scheme sistem. Agar pengguna bisa memilih lewat toggle, v4 memakai @custom-variant untuk mengikat dark: pada class .dark, biasanya diatur via localStorage.

Situs ini diputuskan light-only, jadi infra dark hanya dipakai untuk demo ter-scope di bawah: container class="dark" membuat seluruh varian dark: di dalamnya aktif, sekecil apa pun areanya. Ini juga yang akan kamu pakai di Latihan Level 6.

Strategi class, bukan hanya media query live

Light

bg-white · border-black

Dark (scoped)

base classes + varian dark:

css

@custom-variant dark (&:where(.dark, .dark *));

Decision Rule

dark: untuk theme/state khusus. Situs light-only tetap butuh infra ini untuk demo & pembelajaran.