夜間模式，顧名思義就是在用戶使用網(wǎng)頁時，通過js技術實現(xiàn)背景顏色、字體顏色等元素的自動調整，以便用戶更加舒適地瀏覽，減少對眼睛的刺激。

夜間模式在一些長時間使用的應用上非常常見，比如閱讀器、視頻客戶端等。實現(xiàn)夜間模式的方式也很多，下面我來介紹一下js實現(xiàn)夜間模式的方式。

var mode = localStorage.getItem('mode');
if (mode === 'night') {
$('body').addClass('night-mode');
}

上述代碼通過localStorage存儲用戶選擇的模式，如果是夜間模式則給body添加night-mode類。下面來看一下它在css中是如何體現(xiàn)的。

body {
background-color: #fff;
color: #333;
}
.night-mode {
background-color: #222;
color: #f0f0f0;
}

代碼中使用了基礎的css知識，為body設置默認樣式；給night-mode類設置夜間模式下的樣式。這樣，當用戶切換模式時，夜間模式的樣式就會生效了。

除了上述的方式，還可以通過添加一個開關按鈕實現(xiàn)夜間模式的切換。下面來看一下代碼如何實現(xiàn)。

var $switcher = $('.night-mode-switcher');
$switcher.on('click', function() {
var $body = $('body');
var mode = $body.hasClass('night-mode') ? 'day' : 'night';
$body.toggleClass('night-mode', mode === 'night');
localStorage.setItem('mode', mode);
});

這段代碼中，我們?yōu)殚_關按鈕添加了一個click事件，通過toggleClass方法為body添加或移除night-mode類。此外，還使用了localStorage存儲用戶選擇的模式。

通過上述幾種方式，我們可以很方便地為網(wǎng)頁添加夜間模式。這種模式的出現(xiàn)，不僅可以提升用戶體驗，也有助于眼睛的健康。