Question

用户更改模式时是否会触发夜间模式或javascript事件的CSS前缀？如果用户从browser setting启用夜间模式，我想要元素的自定义颜色。

由于

Answer 1

快到2020年了，我们现在可以使用CSS媒体查询来检测夜间模式。

@media (prefers-color-scheme: dark){
  body {
    background-color: black;
    color: #ccc;
  }
}

Answer 2

因为“夜间模式”不仅会涉及改变背景颜色，还会涉及字体颜色（以及其他很多东西），我建议使用这样的解决方案：

示例HTML：

<body class="night">

现在，在标准模式下，body标记默认情况下不会有night类，但您可以通过切换类函数（例如jQuery的toggleClass）添加此类。

然后在CSS中执行类似......

的操作

<强> CSS：

body {
    color: #000;
    background-color: #fff;
}

body.night {
    color: #fff;
    background-color: #000;    
}

注意：仅限示例，请勿在黑色背景上使用白色文字：）

现在，当切换类并添加night类时，所有颜色都将更改，页面将处于“夜间”模式。

在页面刷新/导航期间，如果您还需要有关使此模式“坚持”的说明，请不要这样做;如果是这样，最好使用在浏览器关闭时到期的session或cookie处理。

Answer 3

有一个CSS过滤器，我不确定Twitter是否使用了这样的东西（没有图像仅反转文字和背景。

注1：您可以降低反相滤波器的索引，例如：.8 note2：没有IE支持:(但Edge支持它

$('button').on('click', function(){
  $('.wrap').toggleClass('day night') ;
});

.wrap{
  background: white;
}
.day{
  filter: invert(0);
}

.night{
  filter: invert(1);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="wrap day">
  <img src="https://placeimg.com/200/150/any" />

  <p>Lorem ipsus </p>
  <button>Day / night</button>
  
 </div>

如何检测夜间模式事件 - JavaScript？

3 个答案: