简单实用：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 切换功能

公告

您的项目需求