Pemasaran Kandungan

Bagaimanakah Anda Boleh Menukar Warna Fon Secara Pengaturcaraan Berdasarkan Latar Belakang? (Mod Cerah/Gelap)

Sekiranya anda pernah berkunjung Martech Zone akhir-akhir ini, anda mungkin perasan bahawa kami kini menawarkan keupayaan untuk melihat tapak dalam mod terang atau gelap. Cari sahaja untuk bulan atau matahari ikon bersebelahan tarikh di bar navigasi kiri atas pada tapak.

Ia adalah ciri yang cukup hebat dan ia berfungsi dengan baik. Apabila saya melancarkan alat penukaran baharu kepada tukar HEX kepada RGB, saya sebenarnya mahu memaparkan warna yang cuba dikira oleh pengguna. Saya bukan sahaja memaparkan warna, tetapi saya juga menambah ciri bagus yang memaparkan nama warna. Tetapi itu memperkenalkan satu isu…

Jika swatch yang memaparkan warna mempunyai latar belakang yang terang, anda tidak akan dapat membaca teks yang saya hasilkan secara dinamik untuk swatch. Jadi… Saya terpaksa mencipta fungsi yang menetapkan warna fon berdasarkan warna latar belakang dan sama ada terdapat kontras yang mencukupi atau tidak untuk melihat fon.

Fungsi JavaScript Untuk Mod Terang atau Gelap

Saya perlu mencipta fungsi di mana saya boleh menghantar kod hex untuk warna, kemudian kembalikan sama ada fon harus putih atau hitam berdasarkan kontras. Fungsi JavaScript ini berjaya…

function contrast(hex) {
  var threshold = 149;
  let r = 0, g = 0, b = 0;

  // 3 digits
  if (hex.length == 4) {
    r = "0x" + hex[1] + hex[1];
    g = "0x" + hex[2] + hex[2];
    b = "0x" + hex[3] + hex[3];
  // 6 digits
  } else if (hex.length == 7) {
    r = "0x" + hex[1] + hex[2];
    g = "0x" + hex[3] + hex[4];
    b = "0x" + hex[5] + hex[6];
  }
  return ((r*0.299 + g*0.587 + b*0.114) > threshold) ? '#000000' : '#ffffff';
}

Ambang dalam fungsi ini digunakan untuk menentukan sama ada warna tertentu adalah terang atau gelap. Fungsi menukarkan kod warna perenambelasan yang diberikan kepada merah, hijau dan birunya (rgb) komponen, kemudian menggunakan formula untuk mengira kecerahan warna yang dilihat. Jika kecerahan melebihi ambang, fungsi itu kembali #000000, iaitu kod hex untuk hitam. Jika kecerahan berada di bawah ambang, fungsi itu kembali #ffffff, iaitu kod hex untuk putih.

Tujuan ambang ini adalah untuk memastikan warna teks yang dipilih untuk warna latar belakang yang diberikan mempunyai kontras yang mencukupi agar mudah dibaca. Peraturan biasa ialah teks terang (cth. putih atau kuning) harus digunakan pada latar belakang gelap, dan teks gelap (cth hitam atau biru) hendaklah digunakan pada latar belakang terang. Dengan menggunakan ambang untuk menentukan sama ada warna itu terang atau gelap, fungsi itu boleh memilih warna teks yang sesuai secara automatik untuk warna latar belakang tertentu.

Menggunakan fungsi di atas, saya boleh menggunakan CSS warna fon secara pemrograman berdasarkan warna latar belakang. Uji penukar dan anda akan melihat sejauh mana ia berfungsi!

Douglas Karr

Douglas Karr ialah CMO daripada OpenINSIGHTS dan pengasas Martech Zone. Douglas telah membantu berpuluh-puluh syarikat permulaan MarTech yang berjaya, telah membantu dalam usaha wajar lebih $5 bilion dalam pemerolehan dan pelaburan Martech, dan terus membantu syarikat dalam melaksanakan dan mengautomasikan strategi jualan dan pemasaran mereka. Douglas ialah transformasi digital yang diiktiraf di peringkat antarabangsa dan pakar serta penceramah MarTech. Douglas juga merupakan pengarang buku panduan Dummie dan buku kepimpinan perniagaan yang diterbitkan.

Artikel yang berkaitan

Kembali ke atas butang
Tutup

Adblock Dikesan

Martech Zone mampu memberikan anda kandungan ini tanpa sebarang kos kerana kami mengewangkan tapak kami melalui hasil iklan, pautan ahli gabungan dan tajaan. Kami amat menghargai jika anda akan mengalih keluar penyekat iklan anda semasa anda melihat tapak kami.