使用css实现类似苹果手机的暗黑模式

实现类似苹果手机的暗黑模式主要涉及到 CSS 变量（CSS Custom Properties）和 JavaScript 来切换主题。以下是一个简单的步骤指南：

1. 定义 CSS 变量

首先，在 CSS 中定义两组变量，一组用于明亮模式，另一组用于暗黑模式。

:root {
  --bg-color: #ffffff;
  --text-color: #000000;
}

[data-theme="dark"] {
  --bg-color: #000000;
  --text-color: #ffffff;
}

2. 使用 CSS 变量

然后，在你的 CSS 中使用这些变量来设置背景颜色、文字颜色等。

body {
  background-color: var(--bg-color);
  color: var(--text-color);
}

3. 添加切换按钮

在 HTML 中添加一个按钮，用于切换明亮模式和暗黑模式。

<button id="theme-switcher">切换主题</button>

4. 使用 JavaScript 切换主题

最后，使用 JavaScript 来监听按钮点击事件，并切换 data-theme 属性。

document.getElementById('theme-switcher').addEventListener('click', function() {
  document.documentElement.setAttribute('data-theme', document.documentElement.getAttribute('data-theme') === 'dark' ? 'light' : 'dark');
});

完整示例

以下是一个包含 HTML、CSS 和 JavaScript 的完整示例：

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>暗黑模式示例</title>
</head>
<body>
  <h1>欢迎来到暗黑模式示例</h1>
  <p>点击下面的按钮来切换主题。</p>
  <button id="theme-switcher">切换主题</button>
  <script src="script.js"></script>
</body>
</html>

CSS (styles.css)

:root {
  --bg-color: #ffffff;
  --text-color: #000000;
}

[data-theme="dark"] {
  --bg-color: #000000;
  --text-color: #ffffff;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
  font-family: Arial, sans-serif;
  text-align: center;
  padding: 20px;
}

button {
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
}

JavaScript (script.js)

document.getElementById('theme-switcher').addEventListener('click', function() {
  document.documentElement.setAttribute('data-theme', document.documentElement.getAttribute('data-theme') === 'dark' ? 'light' : 'dark');
});
posted @ 2024-12-18 06:11  王铁柱6  阅读(57)  评论(0)    收藏  举报