web-dev-qa-db-ja.com

JavaScriptを使用してダークモードを検出するにはどうすればよいですか？

WindowsとmacOSにダークモードが追加されました。

CSSの場合、次を使用できます。

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

しかし、私は Stripe Elements APIを使用しています。これは、JavaScriptに色を配置します

例えば：

  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の優先配色を検出するにはどうすればよいですか？

javascriptmacos-darkmode
34
mikemaccana
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
    // dark mode
}
55
Mark Szabo

CSS Media-Queries をJavascriptで直接確認できます

Window.matchMedia（）メソッドは、指定されたCSSメディアクエリ文字列の結果を表すMediaQueryListオブジェクトを返します。 matchMedia（）メソッドの値は、min-height、min-width、orientationなど、CSS @mediaルールの任意のメディア機能にすることができます。

Media-Queryがtrueかどうかを確認するには、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)
}

ユーザーが設定を変更する場合にカラースキームを動的に更新するには、以下を使用できます。

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

function getPreferedColorScheme() {
  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()));
}
0
SanBen