Tailwind CSS Academy · Pelajaran

Tema Berasaskan Pemboleh Ubah CSS

Simpan token reka bentuk sebagai sifat tersuai CSS dan rujukkannya dalam konfigurasi Tailwind untuk membolehkan pertukaran tema semasa masa jalan tanpa penyusunan semula.

Pelajaran 2 daripada 413 langkah

Tema Berasaskan Pemboleh Ubah CSS ialah pelajaran Tailwind CSS Academy percuma di CoddyKit. Ini ialah pelajaran 2 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 Tailwind CSS Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Tailwind CSS Academy merangkumi sejumlah 4 pelajaran.

Mengapa Menggunakan Pemboleh Ubah CSS untuk Penetapan Tema?

Sifat tersuai CSS (pemboleh ubah CSS) ialah kunci kepada penetapan tema semasa masa jalan dengan Tailwind. Berbeza daripada nilai statik yang terbina dalam CSS yang dikompil, pemboleh ubah CSS boleh diubah oleh JavaScript pada bila-bila masa tanpa memuat semula halaman. Ini menjadikannya sesuai untuk melaksanakan pertukaran mod cerah/gelap, tema yang boleh dipilih pengguna atau penjenamaan berbilang penyewa apabila aplikasi yang sama perlu kelihatan berbeza untuk pelanggan yang berlainan.

Mentakrifkan Pemboleh Ubah CSS dalam :root

Pemboleh ubah CSS ditakrifkan pada pemilih :root supaya tersedia secara global di seluruh halaman. Sintaksnya ialah --variable-name: value. Anda merujuknya dengan var(--variable-name). Letakkan takrifan ini dalam fail CSS global anda — biasanya globals.css atau index.css — supaya takrifan tersebut tersedia sebelum sebarang gaya komponen digunakan.

/* globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --color-primary: #3b82f6;
    --color-primary-hover: #1d4ed8;
    --color-surface: #ffffff;
    --color-surface-alt: #f8fafc;
    --color-text: #111827;
    --color-text-muted: #6b7280;
    --color-border: #e5e7eb;
  }
}

Menghubungkan Pemboleh Ubah CSS dengan Konfigurasi Tailwind

Setelah pemboleh ubah CSS ditakrifkan, anda merujuknya dalam tailwind.config.js menggunakan sintaks var(--variable-name). Tailwind akan menjana kelas utiliti yang menggunakan pemboleh ubah ini sebagai nilainya. Apabila pemboleh ubah berubah semasa masa jalan, setiap kelas yang dijana dan merujuknya akan dikemas kini secara automatik — tanpa perlu dikompil semula.

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: 'var(--color-primary)',
        'primary-hover': 'var(--color-primary-hover)',
        surface: 'var(--color-surface)',
        'surface-alt': 'var(--color-surface-alt)',
        'text-base': 'var(--color-text)',
        'text-muted': 'var(--color-text-muted)',
        border: 'var(--color-border)'
      }
    }
  }
}

Menggunakan Kelas Berasaskan Pemboleh Ubah dalam HTML

Selepas menghubungkan pemboleh ubah dengan Tailwind, kelas utiliti anda berfungsi seperti sebelumnya — satu-satunya perbezaan ialah nilai asasnya kini dinamik. Menulis bg-surface menggunakan background-color: var(--color-surface) pada elemen tersebut. Tukar nilai pemboleh ubah dalam CSS dan setiap elemen yang menggunakan bg-surface akan dikemas kini tanpa sebarang perubahan pada HTML atau JavaScript.

<div class="bg-surface text-text-base border border-border rounded-xl p-6">
  <h2 class="text-xl font-semibold text-primary mb-2">Card Title</h2>
  <p class="text-text-muted text-sm">This card adapts to any theme.</p>
  <button class="bg-primary hover:bg-primary-hover text-white px-4 py-2 rounded-lg mt-4">
    Action
  </button>
</div>

Mod Gelap dengan Pemboleh Ubah CSS

Untuk melaksanakan mod gelap, anda menindih nilai pemboleh ubah CSS di bawah kelas .dark pada elemen akar. Apabila JavaScript menogol kelas dark pada html, semua nilai pemboleh ubah bertukar serentak dan setiap komponen dikemas kini serta-merta. Pendekatan ini tidak memerlukan utiliti Tailwind tambahan selain kelas berasaskan pemboleh ubah yang telah anda sediakan pada awalnya.

@layer base {
  :root {
    --color-primary: #3b82f6;
    --color-surface: #ffffff;
    --color-text: #111827;
  }

  .dark {
    --color-primary: #60a5fa;
    --color-surface: #1e293b;
    --color-text: #f1f5f9;
  }
}

Sokongan Kelegapan dengan Pemboleh Ubah CSS

Terdapat satu perkara halus berkaitan warna pemboleh ubah CSS dan sintaks pengubah kelegapan Tailwind. Utiliti seperti bg-primary/50 memerlukan warna dalam format saluran RGB supaya Tailwind boleh menyuntik nilai alfa. Untuk menyokong pengubah kelegapan, takrifkan pemboleh ubah anda sebagai triplet RGB tanpa pembungkus rgb() dan gunakan corak rgb(var() / alpha) dalam konfigurasi.

/* globals.css — RGB triplet format */
:root {
  --color-primary-rgb: 59 130 246;
}

/* tailwind.config.js */
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: ({
          opacityValue
        }) => opacityValue
          ? 'rgb(var(--color-primary-rgb) / ' + opacityValue + ')'
          : 'rgb(var(--color-primary-rgb))'
      }
    }
  }
}

Pelbagai Varian Tema

Pemboleh ubah CSS membolehkan anda mentakrifkan pelbagai tema lengkap, bukan sekadar tema cerah dan gelap. Dengan menggunakan atribut data-theme, anda boleh mengehadkan skop set pemboleh ubah yang berbeza kepada bahagian halaman tertentu atau menukar tema seluruh aplikasi. Ini amat berguna untuk aplikasi SaaS berbilang penyewa yang setiap jenama pelanggan memerlukan skema warna tersendiri daripada pangkalan kod yang dikongsi.

@layer base {
  [data-theme='ocean'] {
    --color-primary: #0ea5e9;
    --color-surface: #0c4a6e;
    --color-text: #e0f2fe;
  }

  [data-theme='forest'] {
    --color-primary: #16a34a;
    --color-surface: '#dcfce7';
    --color-text: #14532d;
  }
}

<!-- Switch theme with JS -->
document.documentElement.setAttribute('data-theme', 'ocean');

Menganimasikan Peralihan Tema

Apabila menukar tema, perubahan warna yang mendadak boleh terasa mengganggu. Menambahkan peralihan CSS pada semua sifat kepada elemen akar menghasilkan kesan perubahan warna yang lancar apabila pemboleh ubah berubah. Pilih dengan berhati-hati — peralihan terlalu banyak sifat atau penggunaan tempoh yang panjang boleh menyebabkan UI terasa lembap. Peralihan selama 150–300ms pada sifat berkaitan warna biasanya paling sesuai.

/* globals.css */
*, *::before, *::after {
  transition-property: color, background-color, border-color;
  transition-duration: 200ms;
  transition-timing-function: ease;
}

/* Exclude transitions from elements that should be instant */
.no-theme-transition,
.no-theme-transition * {
  transition: none !important;
}

Menyimpan Keutamaan Tema

Pertukaran tema tidak berguna jika tetapan itu ditetapkan semula apabila halaman dimuat semula. Gunakan localStorage untuk menyimpan keutamaan pengguna dan memulihkannya pada kunjungan seterusnya. Skrip pemulihan mesti dijalankan sebelum halaman dipaparkan bagi mengelakkan tema yang salah muncul seketika. Letakkan skrip sebaris di bahagian atas head HTML anda — bukan dalam modul yang dimuatkan selepas paparan.

<!-- In <head> before any CSS -->
<script>
  (function() {
    var theme = localStorage.getItem('theme') ||
      (window.matchMedia('(prefers-color-scheme: dark)').matches
        ? 'dark' : 'light');
    document.documentElement.setAttribute('data-theme', theme);
    if (theme === 'dark') {
      document.documentElement.classList.add('dark');
    }
  })();
</script>

Corak Penamaan Pemboleh Ubah Semantik

Gunakan corak penamaan yang konsisten untuk pemboleh ubah CSS supaya pemboleh ubah tersebut mudah dijangka dan menerangkan dirinya sendiri. Corak tiga bahagian --category-role-state berfungsi dengan baik. Contohnya: --color-action-default, --color-action-hover, --color-surface-raised, --color-feedback-error. Elakkan nama yang kabur seperti --color1 atau nama yang terlalu khusus seperti --signup-button-blue.

:root {
  /* Action colors */
  --color-action-default: #3b82f6;
  --color-action-hover: #1d4ed8;
  --color-action-disabled: #93c5fd;

  /* Surface colors */
  --color-surface-base: #ffffff;
  --color-surface-raised: #f8fafc;
  --color-surface-overlay: #f1f5f9;

  /* Feedback colors */
  --color-feedback-success: #16a34a;
  --color-feedback-error: #dc2626;
  --color-feedback-warning: #d97706;
}

Menyahpepijat Tema Pemboleh Ubah CSS

Apabila warna bertema tidak dipaparkan dengan betul, DevTools pelayar ialah bantuan terbaik anda. Panel gaya terhasil menunjukkan nilai yang telah diselesaikan bagi sebarang pemboleh ubah CSS pada mana-mana elemen. Anda juga boleh memeriksa :root secara langsung untuk melihat semua nilai pemboleh ubah. Jika anda melihat rentetan mentah var(--name) dan bukannya warna, pemboleh ubah itu tidak ditakrifkan dalam skop semasa — semak kesilapan ejaan atau blok :root yang tiada.

/* Quick debug: visualize all theme colors */
.theme-debug {
  background-color: var(--color-surface-base);
  color: var(--color-text-primary);
  border: 2px solid var(--color-border);
}

/* In DevTools console: */
/* getComputedStyle(document.documentElement)
   .getPropertyValue('--color-primary') */

Semakan Pantas

Uji pemahaman anda tentang konsep Tailwind CSS Mastery daripada pelajaran ini.

Jawab dalam pelajaran interaktif

Ulang Kaji Pelajaran

Dalam pelajaran ini anda telah mempelajari bahawa: sifat tersuai CSS yang ditakrifkan pada :root berfungsi sebagai token reka bentuk dinamik, konfigurasi Tailwind boleh merujuknya dengan var(--name) supaya kelas yang dijana mewarisi kebolehubahan semasa masa jalan, dan pelbagai tema dilaksanakan dengan menukar nilai pemboleh ubah di bawah pemilih kelas atau atribut data yang berbeza. Seterusnya, kita akan meneroka strategi penetapan tema berbilang jenama untuk pasukan produk.

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: 30
Pelajaran: 120

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Tema Berasaskan Pemboleh Ubah CSS” percuma?

Ya — teks penuh “Tema Berasaskan Pemboleh Ubah CSS” 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 Tailwind CSS Academy, tingkat taraf kepada CoddyKit PRO. Kursus Tailwind CSS Academy merangkumi sejumlah 4 pelajaran.

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

Simpan token reka bentuk sebagai sifat tersuai CSS dan rujukkannya dalam konfigurasi Tailwind untuk membolehkan pertukaran tema semasa masa jalan tanpa penyusunan semula. Anda berlatih Tailwind CSS 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 Tailwind CSS Academy?

Tiada pengalaman terdahulu diperlukan. Pembelajaran Tailwind CSS 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 2 daripada 4.

Berapa lamakah pelajaran “Tema Berasaskan Pemboleh Ubah CSS” 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 Tailwind CSS Academy ini?

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

← Kembali ke Tailwind CSS Academy