Làm cách nào để phát hiện chế độ tối bằng JavaScript?

Windows và macOS hiện có chế độ tối.

Đối với CSS, tôi có thể sử dụng:

    @media (prefers-dark-interface) { 
      color: white; background: black 
    }

Nhưng tôi đang sử dụng API Stripe Elements, đặt màu sắc trong JavaScript

Ví dụ:

  const stripeElementStyles = {
    base: {
      color: COLORS.darkGrey,
      fontFamily: `-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"`,
      fontSize: '18px',
      fontSmoothing: 'antialiased',
      '::placeholder': {
        color: COLORS.midgrey
      },
      ':-webkit-autofill': {
        color: COLORS.icyWhite
      }
    }
  }

Làm cách nào để phát hiện bảng màu ưa thích của HĐH trong JavaScript?

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

Để xem các thay đổi:

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

Theo MediaQueryList - Web API | MDN , addListenerlà cách chính xác để lắng nghe sự thay đổi. addEventListenerkhông hoạt động đối với tôi trên iOS 13.4.

window.matchMedia('(prefers-color-scheme: dark)').addListener(function (e) {
  console.log(`changed to ${e.matches ? "dark" : "light"} mode`)
});

Bạn có thể kiểm tra CSS Media-Queries trực tiếp bằng Javascript

Phương thức window.matchMedia () trả về một đối tượng MediaQueryList đại diện cho kết quả của chuỗi truy vấn phương tiện CSS được chỉ định. Giá trị của phương thức matchMedia () có thể là bất kỳ tính năng đa phương tiện nào của quy tắc CSS @media, như chiều cao tối thiểu, chiều rộng tối thiểu, hướng, v.v.

Để kiểm tra xem Media-Query có đúng, thuộc matchestính có thể được sử dụng

// Check to see if Media-Queries are supported
if (window.matchMedia) {
  // Check if the dark-mode Media-Query matches
  if(window.matchMedia('(prefers-color-scheme: dark)').matches){
    // Dark
  } else {
    // Light
  }
} else {
  // Default (when Media-Queries are not supported)
}

Để cập nhật động bảng màu nếu người dùng thay đổi tùy chọn của họ, bạn có thể sử dụng những điều sau:

function setColorScheme(scheme) {
  switch(scheme){
    case 'dark':
      // Dark
      break;
    case 'light':
      // Light
      break;
    default:
      // Default
      break;
  }
}

function getPreferredColorScheme() {
  if (window.matchMedia) {
    if(window.matchMedia('(prefers-color-scheme: dark)').matches){
      return 'dark';
    } else {
      return 'light';
    }
  }
  return 'light';
}

if(window.matchMedia){
  var colorSchemeQuery = window.matchMedia('(prefers-color-scheme: dark)');
  colorSchemeQuery.addEventListener('change', setColorScheme(getPreferedColorScheme()));
}