JavaScript를 사용하여 다크모드를 검출하려면 어떻게 해야 하나요?

JavaScript를 사용하여 다크모드를 검출하려면 어떻게 해야 하나요?

Windows와 MacOS는 다크 모드가 되었습니다.

CSS의 경우 다음을 사용할 수 있습니다.

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

하지만 JavaScript에 색을 넣는 Stripe Elements API를 사용하고 있습니다.

예를 들어 다음과 같습니다.

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
    }
  }
}

JavaScript에서 OS의 기본 색상표를 검출하려면 어떻게 해야 합니까?

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

변경을 감시하려면:

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

CSS Media-Queries는 JavaScript에서 직접 확인할 수 있습니다.

window.matchMedia() 메서드는 지정된 CSS 미디어 쿼리 문자열의 결과를 나타내는 MediaQueryList 개체를 반환합니다.match Media() 메서드의 값은 최소 높이, 최소 폭, 방향 등 CSS @media 규칙의 미디어 기능 중 하나입니다.

Media-Query가 참인지 확인하려면matches속성을 사용할 수 있습니다.

// 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)
}

를 갱신하려면color-scheme사용자의 취향에 따라 동적으로 다음 항목을 사용할 수 있습니다.

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(getPreferredColorScheme()));
}

Media Query List - Web APIs | MDN에 따르면addListener변경을 듣는 올바른 방법입니다. addEventListeneriOS 13.4에서는 동작하지 않습니다.

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

Nuxt를 사용하여 앱을 개발하려면 컬러 모드가 필요합니다.

언급URL : https://stackoverflow.com/questions/56393880/how-do-i-detect-dark-mode-using-javascript