Bootstrap - 顏色模式：照亮您的網頁設計
Hello, 有志於網頁設計的各位！今天，我們將踏上一段令人興奮的旅程，進入 Bootstrap 顏色模式的世界。作為你們親切友善的電腦老師，我很高興能夠引導你們進行這次色彩繽紛的冒險。讓我們用光明與黑暗的色彩來點綴網絡！
暗色模式：夜貓子的喜愛
暗色模式是什麼？
記得上個你還是個小孩的時候，你會熬夜在被窩裡用手電筒閱讀嗎？暗色模式就像那樣，但是對網站來說！它是一種使用淺色文字在深色背景上的色彩方案。在低光環境下對眼睛比較舒適，而且我們得承認，它看起來也很酷。
暗色模式的重要性
在我多年的教學經驗中，我注意到學生在長時間的編碼課之後眼睛會感到疲勞。暗色模式就像一種舒緩數字眼疲勞的藥膏。此外，它還能節省 OLED 屏幕的電量。一舉兩得！
概覽：照亮顏色模式
Bootstrap 5.3.0 引入了一個遊戲規則改變的功能：內置顏色模式。這意味著您可以輕鬆地在亮色和暗色主題之間切換，而無需出汗。這就像為您的網站添加了一個日/夜開關！
使用：翻轉開關
讓我們來動手寫一些代碼。別擔心如果你是個新手；我們會一步步來。
步驟 1：啟用顏色模式
首先，我們需要告訴 Bootstrap 我們想要使用顏色模式。在您的 HTML 的 <head> 部分添加以下行：
<meta name="color-scheme" content="light dark">這行代碼就像告訴您的瀏覽器：“嘿，為亮色和暗色衣服做準備！”
步驟 2：選擇您的默認設定
現在，讓我們設定一個默認顏色模式。在您的 CSS 檔中添加：
:root {
color-scheme: light dark;
}
[data-bs-theme="light"] {
color-scheme: light;
}
[data-bs-theme="dark"] {
color-scheme: dark;
}這段代碼就像為您的網站設置衣櫥。我們告訴它：“你有亮色和暗色衣服。默認穿亮色，但準備好要改變！”
步驟 3：應用主題
在您的 HTML 的 <html> 或 <body> 標籤中，添加 data-bs-theme 屬性：
<html data-bs-theme="light">或者
<body data-bs-theme="light">這就像為您的網站穿上它的默認衣服。
自定義顏色模式：跳出框架繪畫
但為什麼要停留在亮色和暗色？讓我們創建一個自定義顏色模式！我曾經有一個學生非常愛紫色，她希望她的整個專案都是紫色調。以下是如何創建一個自定義的“紫色”模式：
[data-bs-theme="purple"] {
--bs-body-color: #e0d8ff;
--bs-body-bg: #4a0e78;
--bs-primary: #9d4edd;
--bs-secondary: #c77dff;
}這段代碼就像為您的網站創造一套新衣服。我們為文字、背景和按鈕在紫色主題中定義了自定義顏色。
在顏色模式之間切換：變色龍效應
現在，讓我們添加一些互動性！我們將創建一個按鈕來在亮色、暗色和我們的自定義紫色模式之間切換。
<button id="colorModeToggle">切換顏色模式</button>
<script>
const toggle = document.getElementById('colorModeToggle');
const html = document.documentElement;
const modes = ['light', 'dark', 'purple'];
let currentMode = 0;
toggle.addEventListener('click', () => {
currentMode = (currentMode + 1) % modes.length;
html.setAttribute('data-bs-theme', modes[currentMode]);
});
</script>這段腚本就像給您的網站一根魔杖。每次點擊都會循環我們的顏色模式，改變頁面的整體外觀！
方法表格：您的顏色模式工具箱
這裡有一個方便的表格，列出了您可以使用的與顏色模式相關的方法：
| 方法 | 描述 |
|---|---|
setTheme(theme) |
將顏色模式設定為指定主題 |
getTheme() |
返回當前顏色模式 |
toggleTheme() |
在亮色和暗色模式之間切換 |
isValidTheme(theme) |
檢查給定主題是否有效 |
getPreferredTheme() |
根據系統設定獲取用戶偏好的主題 |
記住，這些方法就像您網頁設計工具箱中的不同畫筆。明智地使用它們，創建有美麗、無障礙的網站！
結論：照亮前進之路
好了，未來的網頁魔法師們！我們已經穿越了 Bootstrap 顏色模式的領域，從基本的亮色和暗色到創建我們自己的自定義主題。記住，網頁設計是關於創造性和用戶體驗。顏色模式是一個強大的工具，讓您的網站不僅僅是功能性的，而且在任何時間都令人愉悅使用。
當我們結束時，我想起了著名畫家克洛德·莫奈的一句話：“顏色是我終日的痴迷、喜悅和折磨。”在網頁設計中，顏色確實可以是所有這些，但有了 Bootstrap 的顏色模式，它帶來的更多的是喜悅而不是折磨！
繼續實驗，持續學習，最重要的是，享受在數字畫布上繪製的樂趣。直到下次見，快樂編碼！
Credits: Image by storyset