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

是否有任何用于改变模式时触发的夜间模式或javascript事件的CSS前缀？如果用户启用夜间模式，我需要元素的自定义颜色。如何检测夜间模式事件 - JavaScript？

另外如何触发夜间模式事件像Twitter呢？

感谢

2017-11-11 Ismail Farooq

没有它不是，如果用户能够从浏览器夜间模式设置 –

因为“夜间模式”，将不仅涉及改变背景颜色，而且字体颜色（加上可能有很多其他的事情）我会推荐一个解决方案，如本：

例如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的情况下处理，因为这会在浏览器关闭时过期。

来源

2017-11-11 16:27:37 Brett

但是，如何检测用户改变国防部工作e？ –

没有检测，只有一个功能。可以初始化'darkmode.css'的**按钮**或**拨号器**（例如）。我通过创建一个'jQuery'函数来实现，当用户想要启用'Dark Mode'时，''link type =“stylesheet”href =“darkmode.css>”'到''标签。但这**不是非常有效，因为浏览器不保存用户首选项（不启用缓存）。 –

@IsmailFarooq你是什么意思“发现” - 你的意思是我在最后一句话中谈论的是什么？在用户切换到网站后，确保在网站导航过程中保持夜间模式不变？ – Brett

有一个CSS滤镜，我不知道，Twitter的使用是这样的（没有图像倒置只有文本和背景

注1：你可以降低翻转过滤器的指数，为前：0.8 注2：不支持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>

来源

2017-11-11 16:29:46

其实我的主要问题是如何检测用户启用夜间模式或不是 –

在Twitter上具体您认为？ –

手机浏览器上有一个选项，尤其是“启用夜间模式”我想跟踪该选项是否有任何事件呢？ –

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

回答

相关问题