在html5中如何使用樣式表給網站添加黑暗模式

這篇文章給大家分享的是有關在html5中如何使用樣式表給網站添加黑暗模式的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

為你的站點添加黑暗模式

黑暗模式 已經應用在了許多流行的網站和應用程序中，諸如 Twitter、Instagram、WhatsApp 和 YouTube 等。但是你該怎樣在自己的網站上添加這種模式呢?

我一直非常喜歡動態的網站顏色主題切換器。它們可以讓你選擇自己喜歡的顏色主題，從而改善了用戶體驗!

例如，下面是在 Twitter 的“顯示設置”下找到的顏色主題選項。

這次就讓我們來創建與之類似的功能吧。也許它不會像 Twitter 的主題更改器那么高大上，但我們會講明白這里會用到的技術細節，告訴大家如何使用可選樣式表(alternate style sheets)和 JavaScript 來切換 CSS 所包含的主題定義。

首先……我們來看一下這篇文章要創建出什么樣的內容。

下面是一個可以切換本網站顏色主題的運行示例：

https://www.javascriptteacher.com/dark-mode-alternate-css-style-sheet.html?rt

單擊各個按鈕就可以立即切換整個網站的 CSS 主題。在本教程的剩余部分，我將向你展示如何向你自己的站點添加黑暗模式功能!

如果你能抓取到這篇黑暗模式教程頁面使用的可選樣式表，那也可以復制到你自己制作的網站上，或者用在你的 Wordpress(或類似的站點構建工具)中。

你可能聽說過 CSS 可以是 內聯 的，內部 的和 外部 的。這決定了 CSS 包含在你的文檔中的方式。但是為了理解可選樣式表的概念，我們首先需要看一下……

層疊樣式表的 3 種類型

但是，層疊樣式表(也就是 CSS)還有其他三種形式。它們分別是 持久 的，首選 的和 可選 的。

持久樣式 指的是始終啟用的 CSS 樣式，并與活動樣式表結合在一起。為了指定持久樣式表，需要將 rel = "stylesheet" 屬性添加到你的 link 標簽，并跳過 title 屬性。

這就是你指定一個樣式表的常規方式。

<!-- Persistent Style Sheet --> 
<link src = "style.css" rel = "stylesheet"

首選樣式 是頁面加載完成后啟用的默認樣式。要創建它，請向你的 CSS link 標簽添加 title 屬性。

<!-- Alternate Style Sheet (just add a title) --> 
<link src = "dark.css" 
      rel = "stylesheet" 
    title = "dark" />

可選樣式 可以實時切換來更改頁面主題，而無需重新加載頁面。

<!-- Dark Mode Alternate Style Sheet --> 
<link src = "dark.css" 
    title = "dark" /> 
      rel = "alternate stylesheet" /> 
<!-- Light Mode Alternate Style Sheet --> 
<link src = "light.css" 
    title = "light" 
      rel = "alternate stylesheet" />

為了創建可選樣式表，你要做的就是將 link 標簽中的 rel 屬性設置為“alternate stylesheet”。就這樣即可。這只是第一步。現在我們需要編寫一個腳本來切換樣式表。

在樣式表之間動態切換

我在做相關研究時，在網上發現了不少有些年頭的可選樣式表 JavaScript 函數。但是它們有點過時了，所以我自己寫了一個版本。

最重要的是，你需要在要啟用的可選樣式表對象上將屬性 disabled 設置為 false。

<!-- Switch to a named alternate stylesheet --> 
function setActiveStyleSheet(title) { 
    let css = `link[rel="alternate stylesheet"]`; 
    let stylesheets = document.querySelectorAll(css); 
    stylesheets.forEach(sheet => sheet.disabled = true); 
    let selector = `link[title="${title}"]`; 
    let stylesheet = document.querySelector(selector); 
    stylesheet.disabled = false;

要動態切換到新樣式表上，首先你必須禁用所有可用的可選樣式表。如果你沒能做到這一點，則會發現你的可選樣式表不起作用(無法切換)。因此，在這個函數的第一步中，我們禁用了所有可用的可選樣式表。完成后，我們啟用了 title 參數中指定的那個。

<!-- Attach event to a button --> 
    let DarkModeButton = document.getElementById("DarkModeButton"); 
    DarkModeButton.addEventListener("click", 
        event => setActiveStyleSheet("darkmode"));

你可以將 setActiveStyleSheet 函數作為回調附加到負責切換它的按鈕的“click”事件上。請注意，上面的示例假設我們有一個 title = "darkmode" 的樣式表。或者，你可以直接在元素上直接使用 onclick 屬性即可：

<div id = "DarkModeButton" 
onclick = "setActiveStyleSheet('darkmode')">

就動態切換 CSS 樣式表需要的工作來說，到這里就都完成了。但是還有一件事!如果用戶在選擇其他主題之后離開站點，則需要確保當用戶返回時網站加載了他們最后選擇的那個主題。這可以使用 cookie 來實現，但是在本教程中，我將使用 HTML5 localStorage 來完成它。

記憶所選主題

我們可以使用 localStorage 來記住用戶之前所選擇的主題。這里的代碼是直截了當的。每次選擇主題時，我們都會將其標題名稱存儲在名為 "theme" 的 localStorage 項目中。下面我們來更新上一步中已經編寫好的那個函數：

<!-- Switch to a named alternate stylesheet --> 
function setActiveStyleSheet(title) { 
    let css = `link[rel="alternate stylesheet"]`; 
    let stylesheets = document.querySelectorAll(css); 
    stylesheets.forEach(sheet => sheet.disabled = true); 
    let selector = `link[title="${title}"]`; 
    let stylesheet = document.querySelector(selector); 
    stylesheet.disabled = false; 
    localStorage.setItem("theme", title); 
}

請注意，這里我們添加了一個新的 localStorage 調用。現在，每次切換到一個可選樣式表上時，它將存儲在關鍵字 "theme" 下。

現在，如果用戶離開站點并(在關閉瀏覽器選項卡之后)再次進入站點，我們需要恢復保存在 localStorage 中的默認主題。

為了做到這一點，我們需要從 DOMContentLoaded 事件上讀取本地存儲(時間就在 DOM 加載完畢之后不久)，并使用存儲在主題項目中的值來選擇樣式表：

<!-- Switch to a named alternate stylesheet --> 
window.addEventListener('DOMContentLoaded', (event) => { 
    console.log('DOM fully loaded and parsed'); 
    let title = localStorage.getItem("theme"); 
    setActiveStylesheet(title); 
})

感謝各位的閱讀！關于“在html5中如何使用樣式表給網站添加黑暗模式”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！