☰

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

tag-icon • tag-icon javascript macos-darkmode
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 の推奨カラースキームを検出するにはどうすればよいでしょうか?

ベストアンサー1

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";
});

おすすめ記事