后端开发教程 - Java、Spring Boot 实战 - msg200.com

我认为将网站设置为暗黑模式的最佳方法。网页暗黑模式

Administrator 2025-05-28

我认为将网站设置为暗模式的最佳方法。

网页版暗黑模式

黑暗模式已经存在一段时间了。从应用程序到网站，它对人们的影响非常巨大。难怪每个人都希望自己的网站能够切换到黑暗模式。

现在，您可能已经了解了多种实现网站暗色模式的方法。无论是切换一个简单的类名来将背景调暗，还是使用“偏好配色方案”根据用户的系统主题进行切换。这很棒。但是，人们的设备可能并不总是支持系统级暗色模式。而且，切换一个类名可能对包含多种颜色的网站没有帮助。那么解决方案是什么呢？

就是这样：其实很简单。实现暗黑模式的最佳方法是，当用户点击暗黑模式按钮或切换开关时，更改整个样式表。

这种方法不仅让您可以自由地为网站设计一个完全深色的版本，而且如果您需要为多个元素设置相应的颜色，这种方法也非常有用，而这很难通过简单地切换类来实现。您还可以为您的网站设置许多其他颜色主题。那么，我们该怎么做呢？读够了！现在让我们开始编写代码。

例如：
这是我们的HTML文件：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Dark Mode Demo</title>
  <link rel="stylesheet" href="styles/light-mode.css" id="theme" />
</head>

<body>
  <div class="wrapper">
    <h1>Dark Mode by changing the style sheet.</h1>
    <button onclick="changeTheme()">Switch Theme</button>
  </div>
  <script src="scripts/script.js"></script>
</body>

</html>

这是我们的light-mode.css文件：

* {
  font-family: "Segoe UI";
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
body {
  transition: 1s;
}

h1 {
  text-align: center;
  font-weight: 300;
  color: #4d4d4d;
  padding: 20px;
}
.wrapper {
  height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
button {
  padding: 13px 10px;
  background-color: rgb(43, 43, 43);
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 1em;
  outline: none;
  cursor: pointer;
}
button:hover {
  background: rgb(45, 50, 102);
  color: rgb(255, 255, 255);
}

这是dark-mode.css文件：

* {
  font-family: "Segoe UI";
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
body {
  background: rgb(29, 29, 29);
  transition: 1s;
}
.wrapper {
  height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
h1 {
  color: #fff;
  text-align: center;
  font-weight: 200;
  padding: 20px;
}

button {
  padding: 13px 10px;
  background-color: rgb(255, 255, 255);
  color: rgb(0, 0, 0);
  border: none;
  border-radius: 4px;
  font-size: 1em;
  outline: none;
  font-weight: 400;
  cursor: pointer;
}
button:hover {
  background: rgb(45, 50, 102);
  color: rgb(255, 255, 255);
}

最后，这是它的JavaScript ：

// Function that swaps the stylesheet.
function changeTheme() {
  let theme = document.getElementById("theme");
  let lightTheme = "styles/light-mode.css";
  let darkTheme = "styles/dark-mode.css";
  // Checking what stylesheet the link tag has.
  if (theme.getAttribute("href") == lightTheme) {
    theme.href = darkTheme;
  } else {
    theme.href = lightTheme;
  }
}

在上面的例子中，点击按钮时，changeTheme()函数会使用我们赋给标签的href属性来查找CSS文件。如果light-mode.css存在，它会用dark-mode.css文件替换它。否则，它会将其切换回light-mode.css文件。就是这样！现在，您的网站已经启用了暗黑模式，无需重新加载页面。感谢您的阅读。希望对您有所帮助。祝您拥有美好的一天！idlink