主題切換模組詳細介紹

什麼是主題切換模組？

這個主題切換模組允許網站用戶輕鬆地在深色模式和淺色模式之間切換。無論您的網站是什麼樣的設計，這個模組都能為用戶提供良好的視覺體驗，並且能夠自動檢查網站是否包含適當的樣式。

功能特色

一鍵切換：通過浮動按鈕快速切換網站的顏色主題。
透明按鈕：按鈕背景透明度設置為 25%，不會搶走網站的關注點，但足夠明顯以便於用戶操作。
動態樣式檢查：自動檢查網站 CSS 是否包含深色模式和淺色模式樣式，如果缺少，會在控制台顯示錯誤信息。

技術支持

兼容性

這個模組使用標準的 JavaScript 和 CSS，並且依賴於 Boxicons 圖標庫。以下是技術要求：

瀏覽器支持：現代瀏覽器（Chrome、Firefox、Safari、Edge）
依賴：Boxicons 圖標庫，通過外部 CDN 引入。

常見問題

為什麼我的主題切換按鈕沒有顯示？: 確保您正確地引入了 theme-toggle.js 文件。
確保在 HTML 中正確引入了 Boxicons 圖標庫。
檢查您的瀏覽器控制台是否有錯誤信息，這可能會提供有用的調試信息。
如何添加更多的主題顏色？: 修改 CSS 中的 --background-color 和 --text-color 變量，並確保您的樣式表中包含這些變量的定義。

使用方法

步驟 1：引入 Boxicons 圖標庫

在您的 HTML 文件 <head> 部分中加入以下內容：

<link href='https://unpkg.com/boxicons/css/boxicons.min.css' rel='stylesheet'>

步驟 2：引入主題切換模組

在您的 HTML 文件 <body> 部分末尾之前引入 theme-toggle.js 文件：

<script src="https://oinktech.github.io/Switch-between-light-and-dark-colors/theme-toggle-version1.js" defer></script>

步驟 3：設置 CSS 樣式

確保您的 CSS 文件中包含深色模式和淺色模式的樣式。例如：


/* 深色模式 */
.dark-mode {
    --background-color: #1e1e1e;
    --text-color: #e0e0e0;
    /* 其他深色模式樣式 */
}

/* 淺色模式 */
.light-mode {
    --background-color: #ffffff;
    --text-color: #333333;
    /* 其他淺色模式樣式 */
}

步驟 4：初始化模組

當 HTML 文件加載完成時，theme-toggle.js 會自動插入必要的 CSS 和按鈕，並處理主題切換邏輯。確保在 HTML 文件中使用了 defer 屬性來確保在 DOM 加載完成後才執行腳本：

<script src="https://oinktech.github.io/Switch-between-light-and-dark-colors/theme-toggle-version1.js" defer></script>

測試

在瀏覽器中打開您的網站，確認主題切換按鈕是否顯示。
點擊按鈕切換主題，並確認主題切換是否按預期工作。
檢查控制台是否有錯誤信息，確保 CSS 中包含深色和淺色模式的樣式。