Windows和macOS现在具有暗模式。
对于CSS,我可以使用:
@media (prefers-dark-interface) {
color: white; background: black
}
但是我正在使用the Stripe ELements API, which puts colors in 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中检测操作系统的首选配色方案?
答案 0 :(得分:24)
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
// dark mode
}
答案 1 :(得分:9)
根据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`)
});
答案 2 :(得分:7)
您可以直接使用Javascript检查CSS Media-Queries
window.matchMedia()方法返回一个MediaQueryList对象 表示指定CSS媒体查询字符串的结果。的 matchMedia()方法的值可以是的任何媒体功能 CSS @media规则,例如最小高度,最小宽度,方向等。
要检查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':
// 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()));
}