JavaScript는 어떻게 스트라이프 요소에 다크 모드를 감지하고 적용할 수 있습니까?

JavaScript에서 다크 모드 감지

Windows 및 macOS와 같은 최신 운영 체제는 다크 모드 옵션을 제공합니다. CSS는 @media(prefers-dark-interface)를 사용하여 다크 모드 기본 설정을 감지하는 방법을 제공하지만 JavaScript 개발자에게는 대체 솔루션이 필요합니다.

JavaScript 감지

감지하려면 JavaScript에서 선호하는 색 구성표를 사용하려면 window.matchMedia() API를 사용할 수 있습니다. 다음 코드는 어두운 모드를 확인합니다.

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

변경 사항 보기

선호하는 색 구성표의 변경 사항을 들을 수도 있습니다.

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

스트라이프 요소에 적용

이 감지를 스트라이프 요소에 적용하려면 선호하는 색 구성표에 따라 StripeElementStyles 개체를 동적으로 수정합니다. 예를 들면 다음과 같습니다.

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

이렇게 하면 스트라이프 요소가 사용자의 운영 체제 기본 설정에 따라 어두운 모드 또는 밝은 모드에 맞게 스타일이 지정됩니다.

위 내용은 JavaScript는 어떻게 스트라이프 요소에 다크 모드를 감지하고 적용할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!