Frontend Academy · Pelajaran

Pemboleh Ubah CSS untuk Tema

Isytiharkan sifat tersuai dengan --, gunakan var(), timpa nilainya dalam skop bersarang, dan laksanakan togol tema cerah/gelap.

Pelajaran 4 daripada 413 langkah

Pemboleh Ubah CSS untuk Tema ialah pelajaran Frontend Academy percuma di CoddyKit. Ini ialah pelajaran 4 daripada 4. Anda boleh membaca keseluruhan pelajaran di bawah secara percuma — kemudian berlatih secara praktikal dalam pelayar menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Frontend Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Frontend Academy merangkumi sejumlah 4 pelajaran.

Apakah Sifat Tersuai CSS?

Sifat tersuai CSS (pemboleh ubah CSS) menyimpan nilai yang boleh digunakan semula di seluruh helaian gaya. Sifat ini diisytiharkan dengan --name: value dan diakses dengan var(--name). Tidak seperti pemboleh ubah prapemproses (Sass), sifat ini bersifat dinamik — anda boleh mengemas kini nilainya dengan JavaScript.

Mengisytiharkan Sifat Tersuai

Isytiharkan sifat pada :root supaya sifat tersebut tersedia secara global. Anda juga boleh mengisytiharkannya pada mana-mana elemen untuk mengehadkan skopnya kepada pepohon unsur 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 Sifat Tersuai

Rujuk pemboleh ubah dengan var(--name). Sertakan nilai sandaran sebagai argumen kedua: var(--color-primary, #3182ce). Nilai sandaran digunakan jika pemboleh ubah tersebut tidak ditakrifkan.

.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 */
}

Lata: Pemboleh Ubah Berskop

Sifat tersuai mengikuti lata dan diwarisi. Jika anda mentakrifkan semula pemboleh ubah pada elemen anak, nilainya akan mengatasi 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 */

Mod Gelap dengan Pemboleh Ubah CSS

Corak mod gelap yang paling kemas ialah mentakrifkan palet warna cerah dan gelap sebagai pemboleh ubah CSS. Togol kelas atau gunakan pertanyaan media prefers-color-scheme untuk bertukar antara kedua-duanya. Anda tidak perlu mengatasi sifat warna satu demi 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); }

Menogol Mod Gelap dengan JavaScript

Tambah butang togol yang menukar atribut data atau kelas pada elemen akar. Pemboleh ubah CSS menguruskan selebihnya — satu baris JavaScript tanpa mengatasi gaya secara individu.

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'
  );
});

Mengemas Kini Pemboleh Ubah dengan JavaScript

element.style.setProperty('--name', value) mengemas kini sifat tersuai sebaris. Membuangnya dengan removeProperty memulihkan nilai lata. Ini membolehkan tema dinamik dan nilai beranimasi.

// 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 Reka Bentuk sebagai Pemboleh Ubah CSS

Takrifkan semua keputusan reka bentuk — palet warna, skala jarak dan skala tipografi — sebagai pemboleh ubah CSS. Ini mewujudkan satu sumber kebenaran yang digunakan oleh komponen. Apabila token diubah, perubahan itu tersebar ke semua tempat dengan serta-merta.

: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 Pemboleh Ubah dalam calc()

Pemboleh ubah CSS boleh digunakan di dalam calc(), lalu membolehkan pengiraan 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));
}

Sokongan Pelayar

Sifat tersuai CSS disokong oleh semua pelayar moden (sejak 2016 bagi pelayar utama). Anda tidak memerlukan prapemproses untuk ciri ini. Sandaran untuk pelayar yang sangat lama: sediakan nilai statik sebelum var().

.btn {
  background: blue;                    /* IE fallback */
  background: var(--color-primary);    /* modern browsers */
}

Sifat Tersuai CSS berbanding Pemboleh Ubah Sass

Pemboleh ubah Sass disusun menjadi nilai statik. Sifat tersuai CSS wujud pada masa jalan, bersifat dinamik, boleh diubah dengan JavaScript dan diwariskan melalui DOM. Gunakan pemboleh ubah CSS untuk tema; pemboleh ubah Sass untuk pemalar pada masa binaan.

Semakan Pantas

Bagaimanakah Anda membaca dan mengemas kini sifat tersuai CSS daripada JavaScript?

Jawab dalam pelajaran interaktif

Imbas Kembali: Sifat Tersuai CSS

Isytiharkan dengan -- pada :root untuk skop global. Gunakan dengan var(). Pemboleh ubah berskop diwariskan kepada keturunan. Mod gelap: takrifkan semula token warna dalam pertanyaan media atau atribut data. Kemas kini daripada JavaScript dengan style.setProperty(). Token reka bentuk sebagai pemboleh ubah = satu sumber kebenaran.

Percuma untuk bermula

Pelajari HTML dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 41
Pelajaran: 163

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Pemboleh Ubah CSS untuk Tema” percuma?

Ya — teks penuh “Pemboleh Ubah CSS untuk Tema” boleh dibaca secara percuma di web ini. Untuk berlatih secara interaktif menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7, serta membuka kunci baki kursus Frontend Academy, tingkat taraf kepada CoddyKit PRO. Kursus Frontend Academy merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Pemboleh Ubah CSS untuk Tema”?

Isytiharkan sifat tersuai dengan --, gunakan var(), timpa nilainya dalam skop bersarang, dan laksanakan togol tema cerah/gelap. Anda berlatih Frontend Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan Frontend Academy?

Tiada pengalaman terdahulu diperlukan. Pembelajaran Frontend Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 4 daripada 4.

Berapa lamakah pelajaran “Pemboleh Ubah CSS untuk Tema” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran Frontend Academy ini?

Ya. Setiap pelajaran Frontend Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

Selam Mendalam Flexbox: Penjajaran, Pembalutan dan Susunan
CSS Grid: template-areas auto-fit minmax
Menggabungkan Flexbox dan Grid
Pemboleh Ubah CSS untuk Tema

← Kembali ke Frontend Academy