隨著人們生活水平的提高，人們對網站的需求也越來越高。當然，只有有質量的網站才能令人耳目一新。而網站中的主題設計，更是能帶給用戶非常好的體驗。很多網站都開發了自己的主題切換功能，接下來我們簡單的介紹一下如何用Javascript來實現主題切換的功能。

一般來說，主題切換的實現原理就是在用戶點擊主題切換按鈕時，通過修改網頁的CSS樣式來改變網站的主題樣式。我們來看一下下面的代碼：

// 獲取頁面元素
var switcher = document.querySelector('.theme-switcher'); 
var body = document.querySelector('body');
var logo = document.querySelector('.logo');
// 定義頁面主題樣式
var darkTheme = {
backgroundColor: '#111',
color: '#efefef',
logo: 'logo_g.png'
};
var lightTheme = {
backgroundColor: '#fff',
color: '#333',
logo: 'logo_w.png'
};
// 定義主題切換函數
function switchTheme() {
if(body.classList.contains('dark-theme')) {
body.classList.remove('dark-theme');
body.classList.add('light-theme');
switcher.innerHTML = '切換至暗黑模式';
// 修改logo
logo.src = lightTheme.logo;
} else {
body.classList.remove('light-theme');
body.classList.add('dark-theme');
switcher.innerHTML = '切換至明亮模式';
// 修改logo
logo.src = darkTheme.logo;
}
}
// 給主題切換按鈕添加點擊事件
switcher.addEventListener('click', switchTheme);

如上代碼所示，我們首先獲取了頁面中的元素，這里獲取到了旋轉的主題切換按鈕、body標簽和logo標簽。然后我們定義了兩個不同的主題樣式，一個是暗黑主題(darkTheme)，一個是明亮主題(lightTheme)。主題切換的實現就是通過切換body標簽的class來實現的。當用戶點擊主題切換按鈕時，我們通過判斷當前頁面是否已經添加了暗黑樣式類(dark-theme)，如果已經添加了，則移除暗黑樣式類，并添加明亮樣式類(light-theme)；反之，在明亮和暗黑模式之間進行切換。最后，在切換的同時我們也會更新logo的圖片來匹配當前所選的主題。

在我們的HTML文件中，我們只需要添加如下幾行代碼即可實現主題切換功能：

<button class="theme-switcher">切換至暗黑模式</button>

以上就是用Javascript實現主題切換功能的全部代碼。雖然看上去代碼量不多，但是對于提高用戶體驗來說有著非常重大的作用。如果你的網站還沒有加上主題切換的功能，那么趕緊來添加吧！