簡單實用：web前端實現網頁主題切換功能

題切換是一種常見的需求，它可以讓用戶根據自己的喜好和環境選擇適合的界面風格。

了解主題切換背景知識

1、主題切換的意義及應用場景

在現代化的網站中，不同的主題樣式，能夠給用戶帶來不同的視覺感受和交互體驗。例如，在夜間模式下，減少亮度可以保護用戶的眼睛，提高使用效果。因此，實現一個主題切換功能對于改善用戶體驗至關重要。

2、常見的主題切換實現方式

實現主題切換功能有多種方法，主要包括通過CSS樣式切換、JavaScript腳本切換和數據庫讀取配置文件切換等。

準備工作

1、創建基本的HTML結構

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Theme Switcher</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- 頁面內容 -->
    <h1>網頁主題切換功能演示</h1>
    <p>請選擇喜歡的主題：</p>
    <button id="lightTheme">白天模式</button>
    <button id="darkTheme">夜間模式</button>
    <script src="script.js"></script>
</body>
</html>

2、引入必要的CSS和JavaScript文件

為了實現主題切換功能，我們需要在HTML文件中，引入相關的CSS和JavaScript文件。創建一個style.css文件和script.js文件，并將其鏈接到index.html中。

通過CSS實現主題切換

1、使用CSS變量定義主題色彩

在style.css文件中，定義一些全局的CSS變量來表示不同的主題色彩。例如，可以定義--primary-color作為主題的主色調。

<style type="text/css">
:root {
  --primary-color: #007bff;
}

.light-mode {
  --primary-color: #007bff;
  --background-color: #ffffff;
  --text-color: #000000;
}

.dark-mode {
  --primary-color: #dd403a;
  --background-color: #333333;
  --text-color: #ffffff;
}

button {
  background-color: var(--primary-color);
  color: var(--text-color);
}
</style>

2、利用媒體查詢和@media規則設置不同的主題樣式

<style type="text/css">
@media (prefers-color-scheme: dark) {
  /* 當系統設置為暗色模式時顯示夜間模式 */
  body {
    background-color: var(--background-color);
    color: var(--text-color);
  }
}

@media (prefers-color-scheme: light) {
  /* 當系統設置為亮色模式時顯示白天模式 */
  body {
    background-color: var(--background-color);
    color: var(--text-color);
  }
}
</style>

3、通過JavaScript來改變CSS變量的值

在script.js文件中，使用JavaScript來控制主題的切換。通過訪問DOM元素的style屬性，修改CSS變量的值，從而改變主題。

const lightModeButton = document.getElementById('lightTheme');
const darkModeButton = document.getElementById('darkTheme');

lightModeButton.addEventListener('click', () => {
  document.documentElement.classList.add('light-mode');
  document.documentElement.classList.remove('dark-mode');
});

darkModeButton.addEventListener('click', () => {
  document.documentElement.classList.add('dark-mode');
  document.documentElement.classList.remove('light-mode');
});

通過JavaScript實現主題切換

1、方式1：使用JavaScript修改DOM元素的類名

const lightModeButton = document.getElementById('lightTheme');
const darkModeButton = document.getElementById('darkTheme');

lightModeButton.addEventListener('click', () => {
  document.body.className = 'light-mode';
});

darkModeButton.addEventListener('click', () => {
  document.body.className = 'dark-mode';
});

2、方式2：利用JavaScript動態生成style標簽并插入到HTML中

const lightModeButton = document.getElementById('lightTheme');
const darkModeButton = document.getElementById('darkTheme');

lightModeButton.addEventListener('click', () => {
  const style = document.createElement('style');
  style.innerHTML = `
    body {
      --primary-color: #007bff;
      --background-color: #ffffff;
      --text-color: #000000;
    }
  `;
  document.head.appendChild(style);
});

darkModeButton.addEventListener('click', () => {
  const style = document.createElement('style');
  style.innerHTML = `
    body {
      --primary-color: #dd403a;
      --background-color: #333333;
      --text-color: #ffffff;
    }
  `;
  document.head.appendChild(style);
});

3、方式3：通過AJAX請求加載不同的CSS文件

const lightModeButton = document.getElementById('lightTheme');
const darkModeButton = document.getElementById('darkTheme');

lightModeButton.addEventListener('click', () => {
  loadCSS('light-theme.css');
});

darkModeButton.addEventListener('click', () => {
  loadCSS('dark-theme.css');
});

function loadCSS(filename) {
  const link = document.createElement('link');
  link.href = filename;
  link.rel = 'stylesheet';
  document.head.appendChild(link);
}

希望本文能夠對您有所幫助，感謝您的閱讀！

人人為我，我為人人，謝謝您的瀏覽，我們一起加油吧。

么是黑暗模式？

深色模式，也稱為淺色暗配色方案，是一種在深色背景上使用淺色文本，圖標和圖形用戶界面元素的配色方案，通常在計算機用戶界面設計和Web設計方面進行討論。

黑暗模式背后的想法是，它可以減少設備屏幕發出的光，同時保持可讀性所需的最小顏色對比度。

黑暗模式的優點是什么？

可以減少使用設備上的能量
在弱光條件下可以潛在地減輕眼睛疲勞和干眼
減少blue light手機發出的聲音–如果你在晚上使用設備，可以讓您保持清醒

如何在你的網站中使用黑暗模式？

HTML代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Dark Mode</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <button class="btn" id="toggleBtn">
        Toggle Dark Mode
    </button>
    <script src="script.js"></script>
</body>
</html>

現在讓我們解決主要問題。首先，我們將為顏色添加css變量（將它們稱為primary和background），并在黑暗模式下覆蓋所需的顏色

:root{
    --primary: #4240b4;
    --background: #dddddd;
}

.dark{
    --background: #222222;
}

html,
body{
    background-color: var(--background);
}

.btn{
    background-color: var(--primary);
}

因此，從javascript中，我們只需要切換html文檔正文的類列表

const body = document.querySelector("body")
const toggleBtn = document.querySelector("#toggleBtn")

toggleBtn.addEventListener("click", (e) => {
    body.classList.toggle("dark")
})

到這里就結束啦，如果你喜歡我的文章的話，記得給我點個贊哦

您2019豬事順利，心想事成。

前言

Tab 切換是種很常見的網頁呈現形式，不管是PC或者H5都會經常看到，今天就為小伙伴們提供多種純CSS Tab 切換的實現方式，同時對比一下那種代碼更方便，更通俗易懂。

3種純CSS方式實現Tab 切換

純CSS實現都面臨2個問題：

1、如何接收點擊事件？

2、如何操作相關DOM？

checked 偽類實現純 CSS Tab 切換

擁有 checked 屬性的表單元素， <input type="radio"> 或者 <input type="checkbox"> 能夠接收到點擊事件。

知識點:

1、使用 radio 標簽的 :checked 偽類，加上 <label for> 實現純 CSS 捕獲點擊事情

2、使用了 ~ 選擇符對樣式進行控制

<div class="container"> 
 <input class="nav1" id="li1" type="radio" name="nav"> 
 <input class="nav2" id="li2" type="radio" name="nav"> 
 <ul class='nav'> 
 <li class='active'><label for="li1">tab1</label></li> 
 <li><label for="li2">tab2</label></li> 
 </ul> 
 <div class="content"> 
 <div class="content1 default">tab1 內容:123456</div> 
 <div class="content2">tab2 內容:abcdefgkijkl</div> 
 </div> 
</div>

添加樣式

.container *{ 
 padding: 0; 
 margin: 0; 
} 
.container { 
 position: relative; 
 width: 400px; 
 margin: 50px auto; 
} 
.container input { 
 display: none; 
} 
.nav { 
 position: relative; 
 overflow: hidden; 
} 
.nav li { 
 width: 200px; 
 float: left; 
 text-align: center; 
 background: #ddd; 
 list-style: none; 
} 
.nav li label { 
 display: block; 
 width: 200px; 
 line-height: 36px; 
 font-size: 18px; 
 cursor: pointer; 
} 
.content { 
 position: relative; 
 overflow: hidden; 
 width: 400px; 
 height: 100px; 
 border: 1px solid #999; 
 box-sizing: border-box; 
 padding: 10px; 
} 
.content1, 
.content2 { 
 display: none; 
 width: 100%; 
 height: 100%; 
} 
.nav1:checked ~ .nav li { 
 background: #ddd; 
 color: #000; 
} 
.nav1:checked ~ .nav li:first-child { 
 background: #ff7300; 
 color: #fff; 
} 
.nav2:checked ~ .nav li { 
 background: #ddd; 
 color: #000; 
} 
.nav2:checked ~ .nav li:last-child { 
 background: #ff7300; 
 color: #fff; 
} 
.nav1:checked ~ .content > div { 
 display: none; 
} 
.nav1:checked ~ .content > div:first-child { 
 display: block; 
} 
.nav2:checked ~ .content > div { 
 display: none; 
} 
.nav2:checked ~ .content > div:last-child { 
 display: block; 
} 
.nav li.active { 
 background: #ff7300; 
 color: #fff; 
} 
.content .default { 
 display: block; 
}

target 偽類實現純 CSS Tab 切換

知識點:

1、要使用 :target 偽元素，需要 HTML 錨點，以及錨點對應的 HTML 片段

2、核心是使用 :target 偽類接收點擊事件

3、通過兄弟選擇符 ~ 控制樣式

<div class="container"> 
 <div id="content1" class="active">tab 1內容:123456</div> 
 <div id="content2">tab 2內容:abcdefgkijkl</div> 
 
 <ul class='nav'> 
 <li class="active"><a href="#content1">tab1</a></li> 
 <li><a href="#content2">tab2</a></li> 
 </ul> 
 
 <div class="wrap"></div> 
</div>

添加樣式

.container *{ 
 padding: 0; 
 margin: 0; 
} 
.container { 
 position: relative; 
 width: 400px; 
 margin: 50px auto; 
} 
 
.nav { 
 position: relative; 
 overflow: hidden; 
} 
 
li { 
 width: 200px; 
 float: left; 
 text-align: center; 
 background: #ddd; 
 list-style: none; 
} 
 
li a { 
 display: block; 
 width: 200px; 
 line-height: 36px; 
 font-size: 18px; 
 cursor: pointer; 
 text-decoration: none; 
 color: #000; 
} 
 
#content1, 
#content2 { 
 position: absolute; 
 overflow: hidden; 
 top: 36px; 
 width: 400px; 
 height: 100px; 
 border: 1px solid #999; 
 box-sizing: border-box; 
 padding: 10px; 
} 
 
#content1, 
#content2 { 
 display: none; 
 width: 100%; 
 background: #fff; 
} 
 
#content1:target, 
#content2:target { 
 display: block; 
} 
 
#content1.active { 
 display: block; 
} 
 
.active ~ .nav li:first-child { 
 background: #ff7300; 
 color: #fff; 
} 
 
#content1:target ~ .nav li { 
 background: #ddd; 
 color: #000; 
} 
#content1:target ~ .nav li:first-child { 
 background: #ff7300; 
 color: #fff; 
} 
 
#content2:target ~ .nav li { 
 background: #ddd; 
 color: #000; 
} 
#content2:target ~ .nav li:last-child { 
 background: #ff7300; 
 color: #fff; 
} 
 
.wrap { 
 position: absolute; 
 overflow: hidden; 
 top: 36px; 
 width: 400px; 
 height: 100px; 
 border: 1px solid #999; 
 box-sizing: border-box; 
}

focus-within 來實現 tab 切換功能

:focus-within 它表示一個元素獲得焦點，或該元素的后代元素獲得焦點。

重點：它或它的后代獲得焦點。

這也就意味著，它或它的后代獲得焦點，都可以觸發 :focus-within。

知識點

1、這個屬性有點類似 Javascript 的事件冒泡，從可獲焦元素開始一直冒泡到根元素 html，都可以接收觸發 :focus-within 事件

2、本例子的思路就是通過獲焦態來控制其他選擇器，以及最重要的是利用了父級的 :not(:focus-within) 來設置默認樣式

<div class="container"> 
 <div class="nav-box"> 
 <button class="nav1">tab1</button> 
 <button class="nav2">tab2</button> 
 <div class="content-box"> 
 <div class="content1"> 
 content-1 
 </div> 
 <div class="content2"> 
 content-2 
 </div> 
 </div> 
 </div> 
</div>

添加樣式

.container { 
 width: 300px; 
 margin: 50px auto; 
 padding: 10px; 
 boder: 1px solid #ddd; 
} 
 
.nav-box { 
 font-size: 0; 
} 
 
button { 
 width: 150px; 
 height: 40px; 
 box-sizing: border-box; 
 outline: none; 
 background: #fff; 
 border: 1px solid #ddd; 
 font-size: 18px; 
 cursor: pointer; 
} 
 
button:focus-within { 
 color: #fff; 
 background: #ff7300; 
} 
 
.content-box { 
 font-size: 24px; 
 border: 1px solid #ddd; 
 height: 100px; 
} 
.content-box div { 
 display: none; 
} 
 
.nav-box:not(:focus-within) .nav1 { 
 color: #fff; 
 background: #ff7300; 
} 
.nav-box:not(:focus-within) .content1 { 
 display: block; 
} 
 
.nav1:focus-within ~ .content-box .content1 { 
 display: block; 
} 
 
.nav2:focus-within ~ .content-box .content2 { 
 display: block; 
}

3種純CSS方式實現Tab 切換

這個效果就很差一些，因為，在tab失去焦點時，就會復原，回到tab1上面，并不推薦這種方式來實現。小編推薦第一種:checked實現方式，更容易理解。

公告

喜歡小編的點擊關注，了解更多知識！

源碼地址和源文件下載請點擊下方“了解更多”

在線咨詢

上一篇：html中的元素類型種類及特點
下一篇：Chrome插件開發采坑指南，CSS如何導入本地圖片

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

簡單實用：web前端實現網頁主題切換功能

了解主題切換背景知識

準備工作

通過CSS實現主題切換

通過JavaScript實現主題切換

么是黑暗模式？

黑暗模式的優點是什么？

如何在你的網站中使用黑暗模式？

前言

checked 偽類實現純 CSS Tab 切換

target 偽類實現純 CSS Tab 切換

focus-within 來實現 tab 切換功能

公告

您的項目需求