FluentStack

CSS Variables dan Dark Mode Dasar

Mode tersedia: dark, light, paper
MasukDaftar
Beginner · Level 3: CSS Fundamentals and LayoutBeginner45 menitBahasa Indonesia

CSS Variables dan Dark Mode Dasar

Gunakan CSS variables untuk menyimpan nilai visual dan mengenal pola dasar dark mode.

StatusMemuat progres
ProgresMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Tujuan belajar

  • Memahami CSS variables sebagai nilai reusable
  • Menggunakan variable untuk warna dan spacing
  • Mengenal pola light/dark values secara sederhana
  • Menghindari nilai warna acak yang berulang di banyak tempat
CSSCSS VariablesDark ModeVisual System

Isi lesson

6 blok
  1. 1.
    CSS variables menyimpan nilai visualBelum selesaiWajib
  2. 2.
    Variable warna dan dark mode sederhanaBelum selesaiWajib
  3. 3.
    Dark mode tetap harus readableBelum selesaiOpsional
  4. 4.
    Cek pemahamanBelum selesaiWajib
  5. 5.
    Coding practiceBelum selesaiWajib
  6. 6.
    RingkasanBelum selesaiWajib

CSS variables menyimpan nilai visual

Wajib

CSS variables menyimpan nilai yang bisa dipakai ulang. Ini membantu warna, spacing, radius, dan typography lebih konsisten.

Dark mode bisa dibuat dengan mengganti nilai variable, bukan menulis ulang semua komponen. Untuk pemula, fokus ke sedikit variable dulu agar pola besarnya jelas.

Bagian ini memengaruhi progres lesson.

Variable warna dan dark mode sederhana

Wajib
css
.page {
  --color-bg: #ffffff;
  --color-text: #18181b;
  --color-card: #f4f4f5;
  --space-page: 24px;

  background: var(--color-bg);
  color: var(--color-text);
  padding: var(--space-page);
}

.card {
  background: var(--color-card);
  padding: 16px;
  border-radius: 12px;
}

.page.dark {
  --color-bg: #18181b;
  --color-text: #fafafa;
  --color-card: #27272a;
}

Variable disimpan di .page. Komponen memakai var(...). Saat .page punya class dark, nilai variable berubah sehingga tampilan ikut berubah.

Bagian ini memengaruhi progres lesson.

Catatan penting

Opsional

Dark mode tetap harus readable

Dark mode yang baik bukan hanya membalik warna. Pastikan kontras tetap nyaman dibaca.

Opsional, tidak menghambat penyelesaian lesson.

Cek pemahaman

WajibJawab dulu

Cek pemahaman singkat

Apa manfaat utama CSS variables dalam visual system?

Progres lesson naik setelah jawaban benar.

Coding practice

WajibDibuka di workspace khusus

Membuat theme card dengan CSS variables

Latihan memakai CSS variables untuk warna halaman dan card sederhana.

Tujuan awal: Fokus di tab CSS.

Practice ini dibuka di workspace khusus. Buka practice untuk memakai editor, preview, dan cek otomatis.

Tombol selesai aktif setelah semua validasi wajib lolos.

9 cek otomatis4 checklist
Belum selesaiBuka practice

Ringkasan

Wajib
  • CSS variables menyimpan nilai visual reusable.
  • Visual system membantu UI tetap konsisten.
  • Dark mode dasar bisa dibuat dengan mengganti nilai variable.
  • Tetap cek kontras dan keterbacaan.
  • Berikutnya kamu akan menguji Responsive Visual System.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian penting lesson ini

Lanjutkan blok wajib berikutnya: CSS variables menyimpan nilai visual.

Memuat progresReview module