CSS Academy · Pelajaran

Variabel CSS untuk Tema

Buat sistem tema berbasis token menggunakan properti khusus CSS yang dapat berganti antara nilai terang dan gelap.

Variabel CSS untuk Tema adalah pelajaran CSS Academy gratis di CoddyKit. Ini adalah pelajaran 2 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 CSS Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus CSS Academy mencakup 4 pelajaran total.

Gambaran Umum Arsitektur Tema

Properti khusus CSS menjadi dasar pembuatan tema CSS modern. Properti ini berfungsi sebagai lapisan token aktif yang dapat ditukar saat runtime, sehingga memungkinkan mode dark, produk berlabel putih, dan personalisasi yang dikendalikan pengguna.

Lapisan Token Desain

Sistem tema yang terstruktur dengan baik memiliki tiga lapisan:

Token primitif: nilai mentah (--blue-500: #3b82f6)
Token semantik: berdasarkan makna (--color-primary: var(--blue-500))
Token komponen: khusus untuk komponen (--button-bg: var(--color-primary))

Mendefinisikan Tema Terang

Definisikan tema terang lengkap pada :root:

<div class="demo">Themed surface<br/><button class="btn">Primary Button</button></div>

Penggantian Tema dark

Ganti token dalam cakupan dark, baik melalui kueri media maupun kelas:

<div class="demo">Adapts to dark mode automatically</div>

Menggunakan Token dalam Komponen

Komponen menggunakan token semantik, bukan nilai yang ditulis langsung:

<div class="card">Card using theme tokens</div>

Penggantian Berbasis Kelas

Izinkan penggantian manual dengan kelas pada <html>:

<div data-theme="dark" class="demo">Dark theme via data-theme</div>
<div data-theme="light" class="demo">Light theme via data-theme</div>

Penerapan Tema Tingkat Komponen

Komponen dapat mendefinisikan lapisan tokennya sendiri untuk penyesuaian yang lebih mendalam:

<div class="card">Component-level theming</div>

Tema Berlabel Putih

Variabel CSS memungkinkan produk berlabel putih, sehingga setiap klien mendapatkan tema yang berbeda dengan mengganti sejumlah kecil token merek:

<div data-brand="client-a" class="brand-demo">Client A brand color</div>
<div data-brand="client-b" class="brand-demo">Client B brand color</div>

Transisi Perubahan Tema

Transisi tema yang mulus dapat dicapai dengan transisi CSS pada properti yang berkaitan dengan warna:

<div class="demo" id="theme-demo">Themed content</div>
<button onclick="document.documentElement.classList.toggle('theme-transitioning'); const d=document.getElementById('theme-demo'); const dark = d.style.background==='rgb(17, 17, 17)'; d.style.background = dark ? '#fff' : '#111'; d.style.color = dark ? '#111' : '#fff';">Toggle Theme (transitions smoothly)</button>

Dokumentasi Token

Dokumentasikan token desain Anda agar semua pengembang mengetahui variabel yang harus digunakan. Komponen panduan gaya, seperti Storybook, yang menampilkan semua token beserta nilai terang dan dark-nya sangat berharga bagi tim besar.

Peralatan Token: Style Dictionary

Style Dictionary (oleh Amazon) secara otomatis mengubah token desain yang didefinisikan dalam JSON menjadi properti khusus CSS, konstanta JavaScript, dan format platform lainnya, sehingga token tetap sinkron di seluruh desain dan kode.

Pemeriksaan Cepat

Dalam arsitektur token dua tingkat, jenis token apa yang harus dirujuk komponen .button untuk warna latar belakangnya?

Rangkuman

Variabel CSS mendukung sistem tema yang tangguh. Bangun tiga lapisan: token primitif, token semantik, dan token komponen. Definisikan tema sebagai penggantian token pada :root melalui kueri media atau pemilih atribut. Gunakan token semantik dalam komponen agar tema diwariskan secara otomatis. Alat seperti Style Dictionary mengotomatiskan distribusi token di berbagai platform.

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 CSS Academy, upgrade ke CoddyKit PRO. Kursus CSS Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Variabel CSS untuk Tema”?

Buat sistem tema berbasis token menggunakan properti khusus CSS yang dapat berganti antara nilai terang dan gelap. Kamu berlatih CSS 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 CSS Academy?

Tidak diperlukan pengalaman sebelumnya. CSS 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 2 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 CSS Academy ini?

Ya. Setiap pelajaran CSS 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

← Kembali ke CSS Academy