html怎么實現暗黑模式 暗黑主題切換功能教程

實現html暗黑模式的核心是使用css的prefers-color-scheme媒體查詢和JavaScript動態切換類名。1. 使用prefers-color-scheme媒體查詢根據系統主題自動應用暗色樣式；2. 通過javascript監聽切換按鈕事件，手動切換.dark-mode類并用localstorage保存用戶偏好；3. 圖片適配可通過css濾鏡、不同圖片資源、svg顏色控制或javascript動態替換實現；4. 代碼高亮適配可引入不同主題css文件或使用css變量控制顏色；5. 對于不支持prefers-color-scheme的瀏覽器，依靠javascript檢查localstorage并應用之前保存的主題設置，默認情況下設定淺色主題以確保兼容性。

實現HTML暗黑模式，核心在于利用CSS的prefers-color-scheme媒體查詢，以及JavaScript動態切換CSS類名。簡單來說，就是根據用戶的系統偏好或者手動切換，應用不同的CSS樣式表。

解決方案

1. CSS媒體查詢：prefers-color-scheme

   立即學習“前端免費學習筆記（深入）”；

   

   這是實現暗黑模式的基礎。prefers-color-scheme允許你根據用戶的系統主題（淺色或深色）應用不同的CSS規則。

   body {     background-color: white;     color: black; }  @media (prefers-color-scheme: dark) {     body {         background-color: black;         color: white;     } }

   這段代碼的意思是，默認情況下，body背景是白色，文字是黑色。但如果用戶的系統設置了暗黑模式，那么body背景會變成黑色，文字會變成白色。

2. JavaScript手動切換：

   僅僅依靠prefers-color-scheme是不夠的，因為用戶可能希望手動切換主題，或者在不支持prefers-color-scheme的瀏覽器上也能使用暗黑模式。

   首先，你需要一個切換按鈕（例如一個checkbox）：

   <label class="switch">   <input type="checkbox" id="darkModeToggle">   <span class="slider round"></span> </label>

   然后，使用JavaScript監聽這個按鈕的點擊事件，并動態地給body添加或移除一個CSS類名，例如dark-mode。

   const darkModeToggle = document.getElementById('darkModeToggle'); const body = document.body;  darkModeToggle.addEventListener('change', () => {   body.classList.toggle('dark-mode');    // 可選：保存用戶的偏好到localStorage   if (body.classList.contains('dark-mode')) {     localStorage.setItem('darkMode', 'enabled');   } else {     localStorage.setItem('darkMode', 'disabled');   } });  // 頁面加載時，檢查localStorage，應用之前的偏好 if (localStorage.getItem('darkMode') === 'enabled') {   body.classList.add('dark-mode');   darkModeToggle.checked = true; }

   對應的CSS：

   body {     background-color: white;     color: black; }  body.dark-mode {     background-color: black;     color: white; }  @media (prefers-color-scheme: dark) {     body:not(.dark-mode) { /* 避免和手動切換沖突 */         background-color: black;         color: white;     } }

   這里，.dark-mode類名覆蓋了默認的樣式，也覆蓋了prefers-color-scheme的樣式（除非你使用了:not(.dark-mode)）。同時，我們使用了localStorage來保存用戶的偏好，這樣用戶下次訪問網站時，主題會自動切換到上次使用的模式。

如何處理圖片和其他資源的暗黑模式適配？

圖片的暗黑模式適配比較麻煩，通常有幾種方法：

• 使用CSS濾鏡： Filter: invert(1); 可以反轉圖片的顏色，但效果可能不理想，尤其是對于色彩豐富的圖片。

  body.dark-mode img {     filter: invert(1); }

• 使用不同的圖片： 為淺色和深色模式準備不同的圖片。可以使用元素或者CSS的background-image，根據不同的媒體查詢加載不同的圖片。

  <picture>   <source srcset="image-dark.png" media="(prefers-color-scheme: dark)">   @@##@@ </picture>

  或者：

  .my-image {     background-image: url('image-light.png'); }  @media (prefers-color-scheme: dark) {     .my-image {         background-image: url('image-dark.png');     } }

• 使用SVG圖片： SVG圖片可以很容易地通過CSS修改顏色。

  <svg width="100" height="100">   <circle cx="50" cy="50" r="40" fill="black" class="my-circle" /> </svg>

  body.dark-mode .my-circle {     fill: white; }

• JavaScript動態替換圖片： 和切換類名類似，你可以使用JavaScript監聽主題切換事件，然后動態地修改標簽的src屬性。

  const image = document.getElementById('myImage');  darkModeToggle.addEventListener('change', () => {   if (body.classList.contains('dark-mode')) {     image.src = 'image-dark.png';   } else {     image.src = 'image-light.png';   } });

代碼高亮如何適配暗黑模式？

代碼高亮通常使用第三方庫，例如Prism.JS或Highlight.js。這些庫通常提供多種主題，包括暗黑主題。

1. 引入不同的主題CSS： 在HTML中引入淺色和深色主題的CSS文件，然后使用prefers-color-scheme或JavaScript動態切換CSS文件。

   <link rel="stylesheet" href="prism-light.css"> <link rel="stylesheet" href="prism-dark.css" media="(prefers-color-scheme: dark)">

   或者，使用JavaScript：

   const prismLight = document.createElement('link'); prismLight.rel = 'stylesheet'; prismLight.href = 'prism-light.css';  const prismDark = document.createElement('link'); prismDark.rel = 'stylesheet'; prismDark.href = 'prism-dark.css'; prismDark.media = '(prefers-color-scheme: dark)';  document.head.appendChild(prismLight); document.head.appendChild(prismDark);  darkModeToggle.addEventListener('change', () => {   if (body.classList.contains('dark-mode')) {     prismLight.disabled = true;     prismDark.media = 'all'; // 啟用暗黑主題   } else {     prismLight.disabled = false;     prismDark.media = '(prefers-color-scheme: dark)'; // 恢復媒體查詢   } });

2. 使用CSS變量： 某些代碼高亮庫允許你通過CSS變量自定義顏色。你可以定義淺色和深色主題的CSS變量，然后根據主題切換CSS變量的值。

   :root {   --code-background: #f0f0f0;   --code-text: #333; }  body.dark-mode {   --code-background: #222;   --code-text: #eee; }  .code-block {   background-color: var(--code-background);   color: var(--code-text); }

如何處理不支持prefers-color-scheme的瀏覽器？

對于不支持prefers-color-scheme的瀏覽器，只能依靠JavaScript手動切換主題。你需要確保JavaScript代碼在頁面加載時檢查localStorage，并應用之前保存的偏好。如果localStorage中沒有保存任何偏好，你可以設置一個默認主題（例如淺色主題）。

// 頁面加載時，檢查localStorage if (localStorage.getItem('darkMode') === 'enabled') {   body.classList.add('dark-mode');   darkModeToggle.checked = true; } else if (localStorage.getItem('darkMode') === null) {   // 如果localStorage中沒有保存任何偏好，設置默認主題   // 可以根據用戶系統的語言設置默認主題   // 例如，如果用戶系統的語言是中文，可以默認使用淺色主題   // 如果用戶系統的語言是英文，可以默認使用深色主題   // 這里簡單地設置一個淺色主題   body.classList.remove('dark-mode');   darkModeToggle.checked = false; }

另外，你可以考慮使用polyfill來模擬prefers-color-scheme的功能，但這通常比較復雜，而且效果可能不如原生支持好。