雲栖号資訊:【 點選檢視更多行業資訊】
在這裡您可以找到不同行業的第一手的上雲資訊,還在等什麼,快來!
為你的站點添加黑暗模式
黑暗模式 已經應用在了許多流行的網站和應用程式中,諸如 Twitter、Instagram、WhatsApp 和 YouTube 等。但是你該怎樣在自己的網站上添加這種模式呢?
我一直非常喜歡動态的網站顔色主題切換器。它們可以讓你選擇自己喜歡的顔色主題,進而改善了使用者體驗!
例如,下面是在 Twitter 的“顯示設定”下找到的顔色主題選項。
![](https://img.laitimes.com/img/__Qf2AjLwojIjJCLyojI0JCLicWZwpmL2IGZ5kzY5YWN3ETZwYTMyQjY5EzY2IzMkZTMiZTNhJmY3QGMmFDMk9CXt92Yu4GZjlGbh5SZslmZxl3Lc9CX6MHc0RHaiojIsJye.jpeg)
這次就讓我們來建立與之類似的功能吧。也許它不會像 Twitter 的主題更改器那麼高大上,但我們會講明白這裡會用到的技術細節,告訴大家如何使用可選樣式表(alternate style sheets)和 JavaScript 來切換 CSS 所包含的主題定義。
首先……我們來看一下這篇文章要建立出什麼樣的内容。
下面是一個可以切換本網站顔色主題的運作示例:
單擊各個按鈕就可以立即切換整個網站的 CSS 主題。
如果你能抓取到這篇黑暗模式教程頁面使用的可選樣式表,那也可以複制到你自己制作的網站上,或者用在你的 Wordpress(或類似的站點建構工具)中。
你可能聽說過 CSS 可以是 内聯 的,内部 的和 外部 的。這決定了 CSS 包含在你的文檔中的方式。但是為了了解可選樣式表的概念,我們首先需要看一下……
層疊樣式表的 3 種類型
但是,層疊樣式表(也就是 CSS)還有其他三種形式。它們分别是 持久 的,首選 的和 可選 的。
持久樣式 指的是始終啟用的 CSS 樣式,并與活動樣式表結合在一起。為了指定持久樣式表,需要将 rel = "stylesheet" 屬性添加到你的 link 标簽,并跳過 title 屬性。
這就是你指定一個樣式表的正常方式。
首選樣式 是頁面加載完成後啟用的預設樣式。要建立它,請向你的 CSS link 标簽添加 title 屬性。
可選樣式 可以實時切換來更改頁面主題,而無需重新加載頁面。
為了建立可選樣式表,你要做的就是将 link 标簽中的 rel 屬性設定為“alternate stylesheet”。就這樣即可。這隻是第一步。現在我們需要編寫一個腳本來切換樣式表。
在樣式表之間動态切換
我在做相關研究時,在網上發現了不少有些年頭的可選樣式表 JavaScript 函數。但是它們有點過時了,是以我自己寫了一個版本。
最重要的是,你需要在要啟用的可選樣式表對象上将屬性 disabled 設定為 false。
要動态切換到新樣式表上,首先你必須禁用所有可用的可選樣式表。如果你沒能做到這一點,則會發現你的可選樣式表不起作用(無法切換)。是以,在這個函數的第一步中,我們禁用了所有可用的可選樣式表。完成後,我們啟用了 title 參數中指定的那個。
你可以将 setActiveStyleSheet 函數作為回調附加到負責切換它的按鈕的“click”事件上。請注意,上面的示例假設我們有一個 title = "darkmode" 的樣式表。或者,你可以直接在元素上直接使用 onclick 屬性即可。
就動态切換 CSS 樣式表需要的工作來說,到這裡就都完成了。但是還有一件事!如果使用者在選擇其他主題之後離開站點,則需要確定當使用者傳回時網站加載了他們最後選擇的那個主題。這可以使用 cookie 來實作,但是在本教程中,我将使用 HTML5 localStorage 來完成它。
記憶所選主題
我們可以使用 localStorage 來記住使用者之前所選擇的主題。這裡的代碼是直截了當的。每次選擇主題時,我們都會将其标題名稱存儲在名為 "theme" 的 localStorage 項目中。下面我們來更新上一步中已經編寫好的那個函數:
請注意,這裡我們添加了一個新的 localStorage 調用。現在,每次切換到一個可選樣式表上時,它将存儲在關鍵字 "theme" 下。
現在,如果使用者離開站點并(在關閉浏覽器頁籤之後)再次進入站點,我們需要恢複儲存在 localStorage 中的預設主題。
為了做到這一點,我們需要從 DOMContentLoaded 事件上讀取本地存儲(時間就在 DOM 加載完畢之後不久),并使用存儲在主題項目中的值來選擇樣式表:
這樣就搞定啦!現在,你有了一個完整的,可選 CSS 主題的主題選擇器。
【雲栖号線上課堂】每天都有産品技術專家分享!
課程位址:
https://yqh.aliyun.com/zhibo立即加入社群,與專家面對面,及時了解課程最新動态!
【雲栖号線上課堂 社群】
https://c.tb.cn/F3.Z8gvnK
原文釋出時間:2020-04-07
本文作者:前端之巅
本文來自:“cocoachina”,了解相關資訊可以關注“
cocoachina”