如何使用 JavaScript 检测暗模式？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/56393880/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I detect dark mode using JavaScript?
提问by mikemaccana
Windows and macOS now have dark mode.
Windows 和 macOS 现在具有深色模式。
For CSS I can use:
对于 CSS，我可以使用：
@media (prefers-dark-interface) {
color: white; background: black
}
But I am using the Stripe Elements API, which puts colors in JavaScript
但我使用的是 Stripe Elements API，它将颜色放入 JavaScript
For example:
例如：
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
}
}
}
How can I detect the OS's preferred color scheme in JavaScript?
如何在 JavaScript 中检测操作系统的首选配色方案？
回答by Mark Szabo
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
// dark mode
}
To watch for changes:
观察变化：
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
const newColorScheme = e.matches ? "dark" : "light";
});
回答by SanBen
You can check the CSS Media-Queriesdirectly with Javascript
您可以直接使用 Javascript检查 CSS Media-Queries
The window.matchMedia() method returns a MediaQueryList object representing the results of the specified CSS media query string. The value of the matchMedia() method can be any of the media features of the CSS @media rule, like min-height, min-width, orientation, etc.
window.matchMedia() 方法返回一个 MediaQueryList 对象，表示指定的 CSS 媒体查询字符串的结果。matchMedia() 方法的值可以是 CSS @media 规则的任何媒体特性，如 min-height、min-width、orientation 等。
To check if the Media-Query is true the matchesproperty can be used
要检查媒体查询是否为真，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)
}
To update the color-scheme dynamically if the user would change their preference the following can be used:
要在用户更改其偏好时动态更新配色方案，可以使用以下方法：
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()));
}
回答by imgg
According to MediaQueryList - Web APIs | MDN, addListeneris the correct way to listen to the change. addEventListeneris not working for me on iOS 13.4.
根据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`)
});
