如何使用JavaScript检测暗模式? [英] How do I detect dark mode using JavaScript?

问题描述

Windows和macOS现在具有暗模式.

Windows and macOS now have dark mode.

对于CSS，我可以使用:

For CSS I can use:

    @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中检测操作系统的首选配色方案?

推荐答案

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

要注意更改:

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

这篇关于如何使用JavaScript检测暗模式?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！