如何在 Web 應用程式中實現深色/淺色主題
- 王林原創
- 2024-07-19 14:22:08902瀏覽
您是否曾經在網站上的深色和淺色主題之間切換並想過「我希望我的網站也能做到這一點」？嗯，現在可以了。在本文中，我將向您展示如何使用 HTML、CSS 和 JavaScript 在 Web 專案中實現深色和淺色模式，為您的使用者提供最佳的視覺體驗。
先決條件：要理解本教學課程，需要對 HTML 和 CSS 有基本的了解。
深色/淺色主題實施
在網站上設定暗模式/亮模式的關鍵組件是：
網頁
主題之間切換的按鈕
要切換的主體或顏色
切換主題和按鈕文字背後的邏輯。
一個網頁
設定您的項目
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Virtual Tour App</title>
</head>
<body>
<div class="hero-sec">
<div class="col1">
<h1>Everyday Is a Journey</h1>
<p>Visit any Location Virtually, Anytime, Anywhere</p>
<button>Tour</button>
</div>
<div class="col2">
<img src="img.jpg" alt="landscape" width="560px">
</div>
</div>
</body>
</html>
純網頁的輸出
切換按鈕
新增主題切換按鈕很重要。這是觸發從淺色模式到深色模式顏色變化的按鈕，反之亦然。
<button id="toggle-button">Dark mode</button>
淺色/深色模式主題
這是至關重要的一步，因為這裡涉及兩個主題或顏色。我們需要一種方法，用幾行程式碼將不同的樣式附加到網頁上。我們將使用 CSS 變數進行主題化。如果您對 CSS 變數感到陌生，請閱讀我的文章。
第 1 步：
聲明淺色主題的樣式
:root{
--bg: #fafaf3;
--color: #0A0A0A
}
// This is the light theme; the default theme
第 2 步：
聲明深色主題的類別
.dark{
--bg: #0A0A0A;
--color: #ffffff;
}
// This is the class that will be added onclick of the button
注意：變數名稱必須相同。
這可以在沒有變數的情況下僅使用 body 元素來完成。但是，最好使用 CSS 變量，因為許多場合需要更改的不僅僅是背景顏色。一些 Web 應用程式主題需要更改文字顏色、邊框顏色、陰影等。因此使用變數可以完全控制所有元素，尤其是在大型應用程式中。
讓我們完成網頁的樣式。確保您的 CSS 連結到 HTML 文件。
:root{
--bg: #fafaf3;
--color: #0A0A0A
}
// This is the light theme; the default theme
.dark{
--bg: #0A0A0A;
--color: #ffffff;
}
body{
background: var(--bg);
color: var(--color);
font-family: monospace
}
.hero-sec{
display: flex;
justify-content: space-evenly;
color: var(--color);
margin-top: 48px;
}
.col1{
margin-top: 6rem;
height: 40%;
}
h1{
font-size: 2.5rem;
}
p{
font-size: 1.3rem;
}
button{
padding: 1rem 2rem;
background-color: #3f51b5;
color: #ffffff;
border: none;
cursor: pointer;
}
.hero-sec button{
font-size: 1.3rem;
}
輸出
切換主題背後的邏輯
當使用者點擊切換按鈕時，我們預計會發生兩件事。
網站的主題或顏色模式應該改變。
按鈕上的文字應該要改變。
更改主題
操作 DOM（文件物件模型）來取得網頁的按鈕和正文。
宣告一個函數，將「dark」類別加入 body 元素（我們已經在 css 中宣告）。
使用者點擊暗/亮模式按鈕後呼叫函數。確保您的 JS 連結到您的 HTML。
const toggleBtn = document.getElementById("toggle-button")
const body = document.body
function toggleTheme() {
body.classList.toggle("dark")
}
toggleBtn.addEventListener('click', toggleTheme);
更改文字
將另一個程式碼區塊加入toggleTheme 函數。此程式碼僅表示如果正文包含“dark”類，則將文字切換為“Light mode”，反之亦然。
if (body.classList.contains("dark")) {
toggleBtn.textContent = "Light Mode";
} else {
toggleBtn.textContent = "Dark Mode";
}
這可以在一行中完成，以獲得更清晰的程式碼。
toggleBtn.textContent = body.classList.contains("dark")? "Light Mode" : "Dark Mode"
是的，您現在可以切換主題。很酷吧？查看隨附的影片以獲取完整演示。
綜上所述
透過遵循本教程中概述的步驟，您可以為用戶提供選擇他們喜歡的主題的靈活性，使您的網頁應用程式更具吸引力和易於訪問。
如果您喜歡我的文章，您可以為我買杯咖啡來支持我的工作
閱讀我關於漸進式 Web 應用程式、網路最內部運作方式、CSS 變數、前端開發初學者指南等的其他文章。
請按讚、留言並追蹤更多網頁開發和技術相關文章。快樂編碼！ ！ ！
以上是如何在 Web 應用程式中實現深色/淺色主題的詳細內容。更多資訊請關注PHP中文網其他相關文章！