Sediakan Mod Gelap Laman Web Anda dalam Minit

Dengan lebih 80% pengguna mahukan mod gelap dalam apl, tidak pernah ada masa yang lebih baik untuk melaksanakannya dalam aplikasi web anda...

Tetapi jangan risau – anda tidak perlu berbuat banyak untuk menulis semula CSS anda atau melalui pelbagai proses pembelajaran yang sukar.

Saya akan berkongsi dengan anda cara untuk menggabungkan sokongan mod gelap untuk tapak anda dalam masa kurang dari 15 minit (ya benar).

Menjelang akhir tutorial ini, anda sepatutnya boleh mempunyai mod gelap yang elegan yang menyedari sistem dan boleh menarik perhatian pengguna anda.

Memahami Mod Gelap Peringkat Sistem

Perkara yang sangat mengagumkan tentang mod gelap sejak beberapa tahun kebelakangan ini ialah anda tidak perlu mencipta penukar tema yang rumit dari bawah.

OS moden sudah pun menjaga keperluan pengguna dan penyemak imbas menjadikannya mudah dengan CSS.

Keajaiban di sini berlaku melalui pertanyaan media yang dipanggil prefers-color-scheme. Ia kelihatan seperti ini:

@media (prefers-color-scheme: dark) {

  /* Your dark mode styles go here */

}

Jadi apabila pengguna mengaktifkan suis mod gelap yang digeruni pada sistem mereka, secara lalai pertanyaan media ini akan diaktifkan.

Ini membolehkan gaya tapak web anda melaraskan secara automatik bergantung pada pilihan pengguna.

Perkara yang baik ialah kebanyakan penyemak imbas moden menyokong perkara ini di luar kotak. Kita bercakap tentang Chrome, Firefox, Safari, Edge – semuanya ada...

Ini bermakna anda boleh memanfaatkan pilihan peringkat sistem tanpa sebarang JavaScript tambahan atau logik yang rumit.

Mari kita ke bahagian yang menyeronokkan – sebenarnya melaksanakan ini dalam kod anda.

Kaedah Pelaksanaan Pantas

Mari kita teruskan - perkara pertama yang anda perlu lakukan ialah menyediakan pembolehubah warna anda dalam CSS anda. Begini caranya:

/* In your root CSS file */
:root {
  /* Light mode colors (default) */
  --background: #ffffff;
  --text: #333333;
  --surface: #f5f5f5;
  --accent: #0066cc;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Dark mode colors */
    --background: #1a1a1a;
    --text: #ffffff;
    --surface: #2d2d2d;
    --accent: #66b3ff;
  }
}

Sekarang, anda akan menggunakan pembolehubah tersebut daripada mengekod warna yang sukar. Seperti ini:

body {
  background-color: var(--background);
  color: var(--text);
}

.card {
  background-color: var(--surface);
}

.button {
  background-color: var(--accent);
}

Itu betul-betul! Tapak web anda kini akan bertukar secara automatik antara mod terang dan gelap berdasarkan pilihan sistem pengguna anda. Tiada JavaScript diperlukan, tiada logik yang tidak kemas – CSS yang bersih dan ringkas.

Petua cepat: Hanya mulakan dengan warna asas dan laraskan mengikut jenama anda. Jangan terlalu risau pada mulanya, anda sentiasa boleh kembali dan mengubahnya kemudian.

Sentuhan Lanjutan

Dengan kod di atas tapak web anda sepatutnya berfungsi dengan sempurna tetapi mari tambahkan penggilap tambahan untuk menjadikan pelaksanaan mod gelap anda benar-benar profesional.

Tweak ini hanya mengambil masa beberapa minit tetapi membuat perbezaan yang besar:

Mula-mula, tambahkan peralihan yang lancar supaya suis mod tidak mengganggu:

:root {
  --background: #ffffff;
  --text: #333333;
  /* Add this line */
  transition: background-color 0.3s ease, color 0.3s ease;
}

Untuk imej, terutamanya logo, tambahkan pertanyaan media ini untuk mengendalikannya dengan elegan:

@media (prefers-color-scheme: dark) {
  img {
    /* Slightly dim non-essential images */
    opacity: 0.8;
  }

  /* But keep logos crisp */
  .logo {
    opacity: 1;
    filter: brightness(1.2);
  }
}

Menambah Butang Togol Tema

Mari tambahkan penukar tema manual untuk pengguna yang ingin mengatasi pilihan sistem mereka.

Berikut ialah pelaksanaan lengkapnya:

Mula-mula, tambahkan HTML ini untuk butang togol anda:

@media (prefers-color-scheme: dark) {

  /* Your dark mode styles go here */

}

Dan inilah JavaScript yang membolehkan semuanya berfungsi:

/* In your root CSS file */
:root {
  /* Light mode colors (default) */
  --background: #ffffff;
  --text: #333333;
  --surface: #f5f5f5;
  --accent: #0066cc;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Dark mode colors */
    --background: #1a1a1a;
    --text: #ffffff;
    --surface: #2d2d2d;
    --accent: #66b3ff;
  }
}

Kod ini memberi anda butang boleh togol yang:

• Menghormati pilihan sistem pengguna secara lalai
• Menyimpan pilihan manual mereka dalam localStorage
• Berterusan merentasi muat semula halaman
• Menunjukkan ikon matahari/bulan berdasarkan tema semasa
• Peralihan lancar antara mod

Petua Pro: Jangan ragu untuk menyesuaikan ikon - anda boleh menggunakan SVG atau membuat reka bentuk suis yang lebih terperinci. Cuma pastikan ia jelas tema semasa!

Kesimpulan

Jadi, di sini anda pergi — tapak anda kini mempunyai ciri mod gelap yang berfungsi sepenuhnya yang direka secara profesional!

Anda mempunyai tema yang sedar sistem, animasi lancar, pemaparan imej yang betul dan juga butang togol yang bagus.

Anda tidak perlu mempunyai semuanya sempurna pada hari pertama, ingat itu.

Lakukan pelaksanaan telanjang, tolak dan buat perubahan semasa anda pergi dan semasa orang menggunakan tapak.

Pengguna anda akan gembira menerima mod gelap walaupun ia tidak berfungsi sepenuhnya.

Atas ialah kandungan terperinci Sediakan Mod Gelap Laman Web Anda dalam Minit. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!