我如何检测暗模式使用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中检测操作系统的首选配色方案?

当前回答

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

2019-09-04 20:52:09

其他回答

根据MediaQueryList - Web api | MDN, addListener是监听更改的正确方式。addEventListener在iOS 13.4上不为我工作。

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

2020-04-21 17:14:14

如果你使用nuxt开发应用，你需要彩色模式。

2022-05-24 21:29:00

你可以直接用JavaScript检查CSS Media-Queries

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

要检查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)
}

要根据用户的偏好动态更新配色方案，可以使用以下方法:

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

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

function updateColorScheme(){
    setColorScheme(getPreferredColorScheme());
}

if(window.matchMedia){
  var colorSchemeQuery = window.matchMedia('(prefers-color-scheme: dark)');
  colorSchemeQuery.addEventListener('change', updateColorScheme);
}

updateColorScheme();

2020-04-01 12:48:21

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

2019-09-04 20:52:09

对于使用react的人，请参阅useDarkMode钩子。它可以监听变化，还可以切换/改变暗模式。

import { useDarkMode } from 'usehooks-ts'

export default function Component() {
  const { isDarkMode, toggle, enable, disable } = useDarkMode()
  return (
    <div>
      <p>Current theme: {isDarkMode ? 'dark' : 'light'}</p>
      <button onClick={toggle}>Toggle</button>
      <button onClick={enable}>Enable</button>
      <button onClick={disable}>Disable</button>
    </div>
  )
}

2023-01-29 05:35:18

我如何检测暗模式使用JavaScript?

推荐文章

最新文章

标签