Bagaimanakah JavaScript Dapat Mengesan dan Menggunakan Mod Gelap pada Elemen Jalur?

Mengesan Mod Gelap dalam JavaScript

Sistem pengendalian moden seperti Windows dan macOS menawarkan pilihan mod gelap. Walaupun CSS menyediakan cara untuk mengesan keutamaan mod gelap menggunakan @media (prefers-dark-interface), pembangun JavaScript memerlukan penyelesaian alternatif.

JavaScript Detection

Untuk mengesan skema warna pilihan dalam JavaScript, anda boleh menggunakan API window.matchMedia(). Kod berikut menyemak mod gelap:

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

Menonton Perubahan

Anda juga boleh mendengar perubahan pada skema warna pilihan:

window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
    const newColorScheme = event.matches ? "dark" : "light";
});

Aplikasi pada Elemen Jalur

Untuk menggunakan pengesanan ini pada Stripe Elements, ubah suai objek stripeElementStyles secara dinamik berdasarkan skema warna pilihan. Contohnya:

if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
    stripeElementStyles.base.color = COLORS.lightGrey;
} else {
    stripeElementStyles.base.color = COLORS.darkGrey;
}

Ini memastikan Elemen Jalur anda digayakan dengan sewajarnya untuk mod gelap atau mod terang berdasarkan pilihan sistem pengendalian pengguna.

Atas ialah kandungan terperinci Bagaimanakah JavaScript Dapat Mengesan dan Menggunakan Mod Gelap pada Elemen Jalur?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!