【HTML】深色主题切换

一个陌生朋友

于 2024-08-27 20:05:46 发布

阅读量745

点赞数 10

文章标签： html5 javascript 前端

本文链接：https://blog.csdn.net/qq_52848404/article/details/141610289

版权

两种方式实现深色主题切换

在现代网页设计中，深色主题（Dark Mode）已成为提升用户体验的重要特性之一。它不仅有助于减少屏幕对眼睛的刺激，还能节省设备电量，特别是在 OLED 屏幕上。本教程将引导小白通过两种不同的方法实现深色主题切换，帮助小白更直观地理解整个过程。

第一种方法：使用 JavaScript 和 CSS 的 :root 以及 [data-theme="dark"]

第二种方法：简化 JavaScript 实现深色主题切换

完整代码参考

第一种方法：使用 JavaScript 和 CSS 的 :root 以及 [data-theme="dark"]

目标：通过 JavaScript 控制 CSS 变量来切换深色主题，并通过动态效果展示主题切换过程。

步骤：

1、理解 CSS 变量：CSS 变量允许你在 CSS 中存储数据，然后在文档中重复使用这些数据。例如，--card-bg-color 可以定义卡片的背景颜色。

2、定义主题变量：在 :root 中定义浅色和深色主题下的 CSS 变量。例如：

:root {
  --card-bg-color: #00aaff;
  --text-color: white;
  --caret-color: orange;
  --blink-color: #55ffff;
}

[data-theme="dark"] {
  --card-bg-color: #333;
  --text-color: #ddd;
  --caret-color: #f39c12;
  --blink-color: #f39c12;
}

3、创建切换函数：使用 JavaScript 来切换 data-theme 属性。当点击按钮时，根据当前主题切换到另一个主题。

function toggleTheme() {
  if (document.documentElement.getAttribute('data-theme') === 'dark') {
    document.documentElement.removeAttribute('data-theme');
  } else {
    document.documentElement.setAttribute('data-theme', 'dark');
  }
}

4、应用主题：在 CSS 中使用这些变量来设置样式。例如，使用 var(--card-bg-color) 来应用背景颜色。

5、HTML 结构：在 HTML 中添加一个按钮，用于触发主题切换。

<div class="card">
  <h1 id="text">Hello World</h1>
  <button onclick="toggleTheme()">color</button>
</div>

总结：此方法通过 JavaScript 控制 data-theme 属性来切换主题，利用 CSS 变量来应用主题样式。

第二种方法：简化 JavaScript 实现深色主题切换

目标：通过简化 JavaScript 代码实现深色主题切换，并通过动态效果展示主题切换过程。

步骤：

1、定义主题类：在 CSS 中定义 .dark-mode 类，包含深色主题的样式。

.dark-mode {
  --card-bg-color: #333;
  --text-color: #ddd;
  --caret-color: #f39c12;
  --blink-color: #f39c12;
}

2、简化 JavaScript：直接在按钮使用 onclick 事件 document.body.classList.toggle('dark-mode') 来切换 .dark-mode 类。

<button onclick="document.body.classList.toggle('dark-mode')">color</button>

3、HTML 结构：在 HTML 中添加一个按钮，用于触发主题切换

<div class="card">
  <h1 id="text">Hello World</h1>
  <button onclick="document.body.classList.toggle('dark-mode')">color</button>
</div>

总结：此方法通过直接切换 .dark-mode 类来实现主题切换，简化了 JavaScript 代码，使得操作更加直观简单。

完整代码参考

HTML 一、

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>WebCat</title>
<style>
:root {
  --card-bg-color: #00aaff;
  --text-color: white;
  --caret-color: orange;
  --blink-color: #55ffff;
}

[data-theme="dark"] {
  --card-bg-color: #333;
  --text-color: #ddd;
  --caret-color: #f39c12;
  --blink-color: #f39c12;
}

.card {
  position: relative;
  margin: 15% auto;
  width: 300px;
  height: 150px;
  background-color: var(--card-bg-color);
  border-radius: 10px;
  padding: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

h1 {
  margin: 0;
  color: var(--text-color);
  overflow: hidden;
  white-space: nowrap;
  border-right: .15em solid var(--caret-color);
  animation: typing 3.5s steps(30, end) infinite, blink-caret .75s step-end infinite;
}

@keyframes typing {
  from { width: 0; }
  50% { width: 69.3%; }
  to { width: 0; }
}

@keyframes blink-caret {
  from, to { border-color: transparent; }
  50% { border-color: var(--blink-color); }
}

button {
  position: absolute;
  right: 0;
  bottom: -25px;
  padding: 1px 15px;
  background-color: var(--card-bg-color);
  color: white;
  font-weight: bold;
  border: none;
  border-radius: 5px;
}

</style>
</head>
<body>
<div class="card">
  <h1 id="text">Hello World</h1>
  <button onclick="toggleTheme()">color</button>
</div>

<script>
function toggleTheme() {
  if (document.documentElement.getAttribute('data-theme') === 'dark') {
    document.documentElement.removeAttribute('data-theme');
  } else {
    document.documentElement.setAttribute('data-theme', 'dark');
  }
}
</script>
</body>
</html>

HTML 二、

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>WebCat</title>
<style>
:root {
  --card-bg-color: #00aaff;
  --text-color: white;
  --caret-color: orange;
  --blink-color: #55ffff;
}

.dark-mode {
  --card-bg-color: #333;
  --text-color: #ddd;
  --caret-color: #f39c12;
  --blink-color: #f39c12;
}

.card {
  /* 略 */
}

h1 {
  /* 略 */
}

/* 相同代码省略 */

button {
  /* 略 */
}

</style>
</head>
<body>
<div class="card">
  <h1 id="text">Hello World</h1>
  <button onclick="document.body.classList.toggle('dark-mode')">color</button>
</div>
</body>
</html>