2017-11-11 71 views
0

是否有任何用於改變模式時觸發的夜間模式或javascript事件的CSS前綴?如果用戶啓用夜間模式,我需要元素的自定義顏色。如何檢測夜間模式事件 - JavaScript?

另外如何觸發夜間模式事件像Twitter呢?

感謝

+0

沒有它不是,如果用戶能夠從瀏覽器夜間模式設置 –

回答

0

因爲「夜間模式」,將不僅涉及改變背景顏色,而且字體顏色(加上可能有很多其他的事情)我會推薦一個解決方案,如本:

例如HTML:現在

<body class="night"> 

,在標準模式下body標籤不會有night類默認,但你會通過撥動類福添加此比如jQuery的toggleClass

然後在CSS這樣做...

CSS:

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

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

注:僅作爲舉例,請不要在黑色背景上用白色文本:)

現在,當班級切換並添加night類時,所有顏色都會改變,頁面將處於「夜間」模式。

不確定您是否還想要在頁面刷新/導航期間使此模式「粘」的說明;如果是這樣的話,那麼最好在sessioncookie的情況下處理,因爲這會在瀏覽器關閉時過期。

+0

但是,如何檢測用戶改變國防部工作e? –

+0

沒有檢測,只有一個功能。可以初始化'darkmode.css'的**按鈕**或**撥號器**(例如)。我通過創建一個'jQuery'函數來實現,當用戶想要啓用'Dark Mode'時,''link type =「stylesheet」href =「darkmode.css>」'到''標籤。但這**不是非常有效,因爲瀏覽器不保存用戶首選項(不啓用緩存)。 –

+0

@IsmailFarooq你是什麼意思「發現」 - 你的意思是我在最後一句話中談論的是什麼?在用戶切換到網站後,確保在網站導航過程中保持夜間模式不變? – Brett

0

有一個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>

+0

其實我的主要問題是如何檢測用戶啓用夜間模式或不是 –

+0

在Twitter上具體您認爲? –

+0

手機瀏覽器上有一個選項,尤其是「啓用夜間模式」我想跟蹤該選項是否有任何事件呢? –