Bagaimana untuk Mengesan Mod Gelap dalam JavaScript untuk Menggayakan Elemen Jalur?

Mengesan Mod Gelap dalam JavaScript untuk Digunakan dengan Stripe Elements API

Windows dan macOS kini menawarkan mod gelap, membenarkan pengguna melaraskan warna antara muka skim mengikut keutamaan mereka. Untuk penggayaan CSS, @media (prefers-dark-interface) boleh digunakan untuk menggunakan peraturan khusus untuk mod gelap. Walau bagaimanapun, pendekatan ini tidak akan menjejaskan komponen yang digayakan secara langsung dalam JavaScript, seperti yang dibuat dengan API Elemen Stripe.

Untuk mengesan skema warna pilihan sistem pengendalian dalam JavaScript, kaedah window.matchMedia boleh digunakan:

if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
    // dark mode is enabled
}

Semakan ini akan kembali benar jika pengguna telah mendayakan mod gelap pada sistem mereka. Anda kemudian boleh menggunakan maklumat ini untuk menggunakan gaya tersuai secara dinamik pada Elemen Jalur anda, memastikan konsistensi dengan tema antara muka pilihan pengguna.

Sebagai contoh, jika anda ingin menetapkan warna teks Elemen Jalur kepada putih apabila mod gelap didayakan, anda boleh menggunakan coretan berikut:

const stripeElementStyles = {
  base: {
    color: window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? COLORS.white : COLORS.darkGrey,
    // ... other styles
  }
}

Selain itu, jika anda ingin memantau perubahan dalam pilihan skema warna pengguna, anda boleh menggunakan kaedah addEventListener:

window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
    const newColorScheme = event.matches ? 'dark' : 'light';
    // Update styles based on the new color scheme
});

Dengan melaksanakan teknik ini, anda boleh memastikan bahawa Elemen Stripe anda menyesuaikan diri dengan lancar dengan skema warna pilihan pengguna, memberikan pengalaman yang konsisten dan menarik secara visual tanpa mengira sistem pengendalian atau tetapan peranti mereka.

Atas ialah kandungan terperinci Bagaimana untuk Mengesan Mod Gelap dalam JavaScript untuk Menggayakan Elemen Jalur?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!