如何檢測夜間模式事件 - 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？

回答

相關問題