在如今的各大網(wǎng)站中我們都可以在系統(tǒng)選擇中選擇自己喜歡的模式就如:日常模式、黑暗模式和免打擾模式等。今天我們就來講講“在html5中使用樣式表給網(wǎng)站添加黑暗模式實例操作!”這方面的相關(guān)內(nèi)容和知識點吧!
為你的站點添加黑暗模式
黑暗模式 已經(jīng)應用在了許多流行的網(wǎng)站和應用程序中,諸如 Twitter、Instagram、WhatsApp 和 YouTube 等。但是你該怎樣在自己的網(wǎng)站上添加這種模式呢?
我一直非常喜歡動態(tài)的網(wǎng)站顏色主題切換器。它們可以讓你選擇自己喜歡的顏色主題,從而改善了用戶體驗!
例如,下面是在 Twitter 的“顯示設(shè)置”下找到的顏色主題選項。
這次就讓我們來創(chuàng)建與之類似的功能吧。也許它不會像 Twitter 的主題更改器那么高大上,但我們會講明白這里會用到的技術(shù)細節(jié),告訴大家如何使用可選樣式表(alternate style sheets)和 JavaScript 來切換 CSS 所包含的主題定義。
首先……我們來看一下這篇文章要創(chuàng)建出什么樣的內(nèi)容。
下面是一個可以切換本網(wǎng)站顏色主題的運行示例:
https://www.javascriptteacher.com/dark-mode-alternate-css-style-sheet.html?rt
單擊各個按鈕就可以立即切換整個網(wǎng)站的 CSS 主題。在本教程的剩余部分,我將向你展示如何向你自己的站點添加黑暗模式功能!
如果你能抓取到這篇黑暗模式教程頁面使用的可選樣式表,那也可以復制到你自己制作的網(wǎng)站上,或者用在你的 Wordpress(或類似的站點構(gòu)建工具)中。
你可能聽說過 CSS 可以是 內(nèi)聯(lián) 的,內(nèi)部 的和 外部 的。這決定了 CSS 包含在你的文檔中的方式。但是為了理解可選樣式表的概念,我們首先需要看一下……
層疊樣式表的 3 種類型
但是,層疊樣式表(也就是 CSS)還有其他三種形式。它們分別是 持久 的,首選 的和 可選 的。
持久樣式 指的是始終啟用的 CSS 樣式,并與活動樣式表結(jié)合在一起。為了指定持久樣式表,需要將 rel = "stylesheet" 屬性添加到你的 link 標簽,并跳過 title 屬性。
這就是你指定一個樣式表的常規(guī)方式。
<!-- Persistent Style Sheet -->
<link src = "style.css" rel = "stylesheet"
首選樣式 是頁面加載完成后啟用的默認樣式。要創(chuàng)建它,請向你的 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" />
為了創(chuàng)建可選樣式表,你要做的就是將 link 標簽中的 rel 屬性設(shè)置為“alternate stylesheet”。就這樣即可。這只是第一步?,F(xiàn)在我們需要編寫一個腳本來切換樣式表。
在樣式表之間動態(tài)切換
我在做相關(guān)研究時,在網(wǎng)上發(fā)現(xiàn)了不少有些年頭的可選樣式表 JavaScript 函數(shù)。但是它們有點過時了,所以我自己寫了一個版本。
最重要的是,你需要在要啟用的可選樣式表對象上將屬性 disabled 設(shè)置為 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;
要動態(tài)切換到新樣式表上,首先你必須禁用所有可用的可選樣式表。如果你沒能做到這一點,則會發(fā)現(xiàn)你的可選樣式表不起作用(無法切換)。因此,在這個函數(shù)的第一步中,我們禁用了所有可用的可選樣式表。完成后,我們啟用了 title 參數(shù)中指定的那個。
<!-- Attach event to a button -->
let DarkModeButton = document.getElementById("DarkModeButton");
DarkModeButton.addEventListener("click",
event => setActiveStyleSheet("darkmode"));
你可以將 setActiveStyleSheet 函數(shù)作為回調(diào)附加到負責切換它的按鈕的“click”事件上。請注意,上面的示例假設(shè)我們有一個 title = "darkmode" 的樣式表?;蛘撸憧梢灾苯釉谠厣现苯邮褂?onclick 屬性即可:
<div id = "DarkModeButton"
onclick = "setActiveStyleSheet('darkmode')">
就動態(tài)切換 CSS 樣式表需要的工作來說,到這里就都完成了。但是還有一件事!如果用戶在選擇其他主題之后離開站點,則需要確保當用戶返回時網(wǎng)站加載了他們最后選擇的那個主題。這可以使用 cookie 來實現(xiàn),但是在本教程中,我將使用 HTML5 localStorage 來完成它。
記憶所選主題
我們可以使用 localStorage 來記住用戶之前所選擇的主題。這里的代碼是直截了當?shù)?。每次選擇主題時,我們都會將其標題名稱存儲在名為 "theme" 的 localStorage 項目中。下面我們來更新上一步中已經(jīng)編寫好的那個函數(shù):
<!-- 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 調(diào)用?,F(xiàn)在,每次切換到一個可選樣式表上時,它將存儲在關(guān)鍵字 "theme" 下。
現(xiàn)在,如果用戶離開站點并(在關(guān)閉瀏覽器選項卡之后)再次進入站點,我們需要恢復保存在 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);
})
這樣就搞定啦!現(xiàn)在,你有了一個完整的,可選 CSS 主題的主題選擇器。當然比較困難的部分是制作一套漂亮的 CSS 布局,但這塊內(nèi)容就等下一篇教程來具體講解吧!
那么我們今天對于“在html5中使用樣式表給網(wǎng)站添加黑暗模式實例操作!”這個內(nèi)容的介紹就到這里了,更多有關(guān)于html樣式使用和更多的相關(guān)內(nèi)容都能在W3Cschool學習到!