使用JavaScript检测暗模式

Question

Windows和macOS现在具有暗模式。

对于CSS，我可以使用：

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

但是我正在使用Stripe ELements API，该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中检测操作系统的首选配色方案？

Answer 1

根据MediaQueryList - Web APIs | MDN，addListener才是听变的正确方式。addEventListener在 iOS 13.4 上对我不起作用。

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

Answer 2

这是根据SanBen 的回答写的一句话：

const getPreferredScheme = () => window?.matchMedia?.('(prefers-color-scheme:dark)')?.matches ? 'dark' : 'light';

Answer 3

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

Answer 4

您可以直接使用 Javascript检查 CSS Media-Queries

window.matchMedia() 方法返回一个 MediaQueryList 对象，表示指定的 CSS 媒体查询字符串的结果。matchMedia() 方法的值可以是 CSS @media 规则的任何媒体特性，如 min-height、min-width、orientation 等。

要检查媒体查询是否为真，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 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(getPreferedColorScheme()));
}

Answer 5

检查matchMedia选项：

function getTheme() {
  if(window.matchMedia && window.matchMedia("(prefers-color-scheme:dark)").matches) {
    return "dark";
  } else {
    return "light";
  }
}