Variabel CSS untuk Tema
Deklarasikan properti khusus dengan --, gunakan var(), timpa nilainya dalam scope bertingkat, dan buat tombol pengalih tema terang/gelap.
Variabel CSS untuk Tema adalah pelajaran Frontend Academy gratis di CoddyKit. Ini adalah pelajaran 4 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Frontend Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Frontend Academy mencakup 4 pelajaran total.
Apa Itu Properti Kustom CSS?
Properti kustom CSS (variabel CSS) menyimpan nilai yang dapat digunakan kembali di seluruh lembar gaya. Properti ini dideklarasikan dengan --name: value dan diakses dengan var(--name). Berbeda dari variabel praprosesor seperti Sass, properti ini bersifat dinamis — Anda dapat memperbaruinya dengan JavaScript.
Mendeklarasikan Properti Kustom
Deklarasikan properti pada :root agar tersedia secara global. Anda juga dapat mendeklarasikannya pada elemen apa pun untuk membatasi cakupannya pada subpohon elemen tersebut.
:root {
--color-primary: #3182ce;
--color-bg: #f7fafc;
--color-text: #1a202c;
--spacing-md: 16px;
--border-radius: 8px;
--font-sans: 'Inter', system-ui, sans-serif;
}Menggunakan Properti Kustom
Rujuk variabel dengan var(--name). Sertakan nilai pengganti sebagai argumen kedua: var(--color-primary, #3182ce). Nilai pengganti digunakan jika variabel belum didefinisikan.
.card {
background: var(--color-bg);
color: var(--color-text);
padding: var(--spacing-md);
border-radius: var(--border-radius);
}
.btn {
background: var(--color-primary, blue); /* fallback */
}Cascade: Variabel dengan Cakupan
Properti kustom mengikuti cascade dan diwariskan. Jika Anda mendefinisikan ulang variabel pada elemen anak, nilainya akan menggantikan nilai elemen induk untuk elemen tersebut dan semua turunannya.
:root { --accent: blue; }
.card { color: var(--accent); } /* blue */
.special-section {
--accent: green; /* override for this subtree */
}
.special-section .card { color: var(--accent); } /* green */Mode Gelap dengan Variabel CSS
Pola mode gelap yang paling rapi: tentukan palet warna terang dan gelap sebagai variabel CSS. Alihkan kelas atau gunakan kueri media prefers-color-scheme untuk berpindah. Anda tidak perlu mengganti properti warna satu per satu.
:root {
--bg: #ffffff;
--text: #1a202c;
--card-bg: #f7fafc;
}
[data-theme='dark'], @media (prefers-color-scheme: dark) {
:root {
--bg: #1a202c;
--text: #f7fafc;
--card-bg: #2d3748;
}
}
body { background: var(--bg); color: var(--text); }Mengalihkan Mode Gelap dengan JavaScript
Tambahkan tombol pengalih yang mengubah atribut data atau kelas pada elemen akar. Variabel CSS menangani sisanya — satu baris JavaScript, tanpa penggantian gaya satu per satu.
const btn = document.querySelector('#theme-toggle');
btn.addEventListener('click', () => {
const current = document.documentElement.getAttribute('data-theme');
document.documentElement.setAttribute(
'data-theme',
current === 'dark' ? 'light' : 'dark'
);
});Memperbarui Variabel dengan JavaScript
element.style.setProperty('--name', value) memperbarui properti kustom secara sebaris. Menghapusnya dengan removeProperty memulihkan nilai cascade. Ini memungkinkan tema dinamis dan nilai yang dianimasikan.
// Dynamically set a CSS variable from JS:
document.documentElement.style.setProperty('--primary-hue', '220');
// Based on input:
const hue = document.querySelector('#hue-slider');
hue.addEventListener('input', () => {
document.documentElement.style.setProperty('--primary-hue', hue.value);
});Token Desain sebagai Variabel CSS
Tentukan semua keputusan desain — palet warna, skala jarak, skala tipografi — sebagai variabel CSS. Ini menciptakan satu sumber kebenaran yang digunakan oleh komponen. Perubahan token langsung diterapkan di mana-mana.
:root {
/* Colour scale */
--blue-50: #ebf8ff;
--blue-100: #bee3f8;
--blue-500: #3182ce;
--blue-900: #1a365d;
/* Spacing scale */
--space-1: 4px;
--space-2: 8px;
--space-4: 16px;
--space-8: 32px;
}Menggunakan Variabel dalam calc()
Variabel CSS dapat digunakan di dalam calc(), sehingga memungkinkan perhitungan responsif berdasarkan nilai token.
:root { --header-height: 64px; }
.content {
/* Leave room for fixed header */
padding-top: calc(var(--header-height) + 24px);
min-height: calc(100vh - var(--header-height));
}Dukungan Peramban
Properti khusus CSS didukung oleh semua peramban modern (sejak 2016 pada peramban utama). Anda tidak memerlukan praprosesor untuk fitur ini. Nilai cadangan untuk peramban yang sangat lama: berikan nilai statis sebelum var().
.btn {
background: blue; /* IE fallback */
background: var(--color-primary); /* modern browsers */
}Properti Khusus vs Variabel Sass
Variabel Sass dikompilasi menjadi nilai statis. Properti khusus CSS tersedia saat runtime, bersifat dinamis, dapat diubah dengan JavaScript, dan diteruskan melalui DOM. Gunakan variabel CSS untuk tema; gunakan variabel Sass untuk konstanta saat proses build.
Pemeriksaan Singkat
Bagaimana cara membaca dan memperbarui properti khusus CSS dari JavaScript?
Ringkasan: Properti Khusus CSS
Deklarasikan dengan -- pada :root untuk lingkup global. Gunakan dengan var(). Variabel yang memiliki lingkup tertentu diteruskan ke turunan. Mode gelap: tetapkan ulang token warna dalam kueri media atau atribut data. Perbarui dari JavaScript dengan style.setProperty(). Token desain sebagai variabel = satu sumber kebenaran.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Variabel CSS untuk Tema” gratis?
Ya — teks lengkap “Variabel CSS untuk Tema” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Frontend Academy, upgrade ke CoddyKit PRO. Kursus Frontend Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Variabel CSS untuk Tema”?
Deklarasikan properti khusus dengan --, gunakan var(), timpa nilainya dalam scope bertingkat, dan buat tombol pengalih tema terang/gelap. Kamu berlatih Frontend Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai Frontend Academy?
Tidak diperlukan pengalaman sebelumnya. Frontend Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 4 dari 4.
Berapa lama pelajaran “Variabel CSS untuk Tema” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran Frontend Academy ini?
Ya. Setiap pelajaran Frontend Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- Pendalaman Flexbox: Perataan, Pembungkusan, Urutan
- CSS Grid: template-areas, auto-fit, minmax
- Menggabungkan Flexbox dan Grid
- Variabel CSS untuk Tema