日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
如何使用可選樣式表為網(wǎng)站或應(yīng)用添加黑暗模式

為你的站點(diǎn)添加黑暗模式

高安網(wǎng)站建設(shè)公司創(chuàng)新互聯(lián)公司,高安網(wǎng)站設(shè)計(jì)制作，有大型網(wǎng)站制作公司豐富經(jīng)驗(yàn)。已為高安1000+提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\外貿(mào)網(wǎng)站制作要多少錢，請找那個(gè)售后服務(wù)好的高安做網(wǎng)站的公司定做！

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

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

例如，下面是在 Twitter 的“顯示設(shè)置”下找到的顏色主題選項(xiàng)。

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

首先……我們來看一下這篇文章要?jiǎng)?chuàng)建出什么樣的內(nèi)容。

下面是一個(gè)可以切換本網(wǎng)站顏色主題的運(yùn)行示例：

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

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

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

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

層疊樣式表的 3 種類型

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

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

這就是你指定一個(gè)樣式表的常規(guī)方式。

 
 
 
 
    
  
  
  
  
    2. 
  
  
  
  
  2.

選擇樣式 是頁面加載完成后啟用的默認(rèn)樣式。要?jiǎng)?chuàng)建它，請向你的 CSS link 標(biāo)簽添加 title 屬性。

 
 
 
 
    
  
  
  
  
    2. 
  
  
  
  
  2. 
  
  
  
  
  3.       rel = "stylesheet"
    4. 
  
  
  
  
  4.     title = "dark" />
    5.

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

 
 
 
 
    
  
  
  
  
    2. 
  
  
  
  
  2. 
  
  
  
  
  3.     title = "dark" />
    4. 
  
  
  
  
  4.       rel = "alternate stylesheet" />
    5. 
  
  
  
  
    6. 
  
  
  
  
  6. 
  
  
  
  
  7.     title = "light"
    8. 
  
  
  
  
  8.       rel = "alternate stylesheet" />
    9.

為了創(chuàng)建可選樣式表，你要做的就是將 link 標(biāo)簽中的 rel 屬性設(shè)置為“alternate stylesheet”。就這樣即可。這只是第一步?，F(xiàn)在我們需要編寫一個(gè)腳本來切換樣式表。

在樣式表之間動態(tài)切換

我在做相關(guān)研究時(shí)，在網(wǎng)上發(fā)現(xiàn)了不少有些年頭的可選樣式表 JavaScript 函數(shù)。但是它們有點(diǎn)過時(shí)了，所以我自己寫了一個(gè)版本。

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

 
 
 
 
    
  
  
  
  
    2. 
  
  
  
  
  2. function setActiveStyleSheet(title) {
    3. 
  
  
  
  
  3.     let css = `link[rel="alternate stylesheet"]`;
    4. 
  
  
  
  
  4.     let stylesheets = document.querySelectorAll(css);
    5. 
  
  
  
  
  5.     stylesheets.forEach(sheet => sheet.disabled = true);
    6. 
  
  
  
  
  6.     let selector = `link[title="${title}"]`;
    7. 
  
  
  
  
  7.     let stylesheet = document.querySelector(selector);
    8. 
  
  
  
  
  8.     stylesheet.disabled = false;
    9.

要?jiǎng)討B(tài)切換到新樣式表上，首先你必須禁用所有可用的可選樣式表。如果你沒能做到這一點(diǎn)，則會發(fā)現(xiàn)你的可選樣式表不起作用(無法切換)。因此，在這個(gè)函數(shù)的第一步中，我們禁用了所有可用的可選樣式表。完成后，我們啟用了 title 參數(shù)中指定的那個(gè)。

 
 
 
 
    
  
  
  
  
    2. 
  
  
  
  
  2.     let DarkModeButton = document.getElementById("DarkModeButton");
    3. 
  
  
  
  
  3.     DarkModeButton.addEventListener("click",
    4. 
  
  
  
  
  4.         event => setActiveStyleSheet("darkmode"));
    5.

你可以將 setActiveStyleSheet 函數(shù)作為回調(diào)附加到負(fù)責(zé)切換它的按鈕的“click”事件上。請注意，上面的示例假設(shè)我們有一個(gè) title = "darkmode" 的樣式表?；蛘?，你可以直接在元素上直接使用 onclick 屬性即可：

 
 
 
 
    
  
  
  
  
  1. 
  
  
  
  
  2. onclick = "setActiveStyleSheet('darkmode')">
    3.

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

記憶所選主題

我們可以使用 localStorage 來記住用戶之前所選擇的主題。這里的代碼是直截了當(dāng)?shù)?。每次選擇主題時(shí)，我們都會將其標(biāo)題名稱存儲在名為 "theme" 的 localStorage 項(xiàng)目中。下面我們來更新上一步中已經(jīng)編寫好的那個(gè)函數(shù)：

  
 
 
 
    
   
  
  
  
    2. 
   
  
  
  
  2. function setActiveStyleSheet(title) {
    3. 
   
  
  
  
  3.     let css = `link[rel="alternate stylesheet"]`;
    4. 
   
  
  
  
  4.     let stylesheets = document.querySelectorAll(css);
    5. 
   
  
  
  
  5.     stylesheets.forEach(sheet => sheet.disabled = true);
    6. 
   
  
  
  
  6.     let selector = `link[title="${title}"]`;
    7. 
   
  
  
  
  7.     let stylesheet = document.querySelector(selector);
    8. 
   
  
  
  
  8.     stylesheet.disabled = false;
    9. 
   
  
  
  
  9.     localStorage.setItem("theme", title);
    10. 
   
  
  
  
  10. }
    11.

請注意，這里我們添加了一個(gè)新的 localStorage 調(diào)用?，F(xiàn)在，每次切換到一個(gè)可選樣式表上時(shí)，它將存儲在關(guān)鍵字 "theme" 下。

現(xiàn)在，如果用戶離開站點(diǎn)并(在關(guān)閉瀏覽器選項(xiàng)卡之后)再次進(jìn)入站點(diǎn)，我們需要恢復(fù)保存在 localStorage 中的默認(rèn)主題。

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

  
 
 
 
    
   
  
  
  
    2. 
   
  
  
  
  2. window.addEventListener('DOMContentLoaded', (event) => {
    3. 
   
  
  
  
  3.     console.log('DOM fully loaded and parsed');
    4. 
   
  
  
  
  4.     let title = localStorage.getItem("theme");
    5. 
   
  
  
  
  5.     setActiveStylesheet(title);
    6. 
   
  
  
  
  6. })
    7.

這樣就搞定啦!現(xiàn)在，你有了一個(gè)完整的，可選 CSS 主題的主題選擇器。當(dāng)然比較困難的部分是制作一套漂亮的 CSS 布局，但這塊內(nèi)容就等下一篇教程來具體講解吧!


本文名稱：如何使用可選樣式表為網(wǎng)站或應(yīng)用添加黑暗模式
瀏覽地址：http://m.5511xx.com/article/dphppso.html