在您的网站上实施暗模式。

暗黑模式是一项非常受欢迎的功能，只需使用基本的 HTML、CSS 和 JS 即可在您的网站上实现。那么，为什么您还没有在自己的网站上启用它呢？只需三个简单的步骤，即可增强您的网站，使其融入暗黑模式！让我们开始吧！

<!-- index.html -->

<!DOCTYPE html>
  <head>
    <title>Dark Mode Feature</title>
    <meta charset="UTF-8">
    <meta http-equiv="Content-type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>

  <body>
    ...
  <body>
</html>

一旦你有了它，就可以实现 HTML 和 CSS

第 2 步：

现在，让我们在基本的 HTML 表单中输入我们需要的所有内容。首先连接你的 JS 和 CSS 文件。添加

<!-- index.html -->

<!DOCTYPE html>
  <head>
    <title>Dark Mode Feature</title>
    <meta charset="UTF-8">
    <meta http-equiv="Content-type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- ADD CSS FILE -->
    <link rel="stylesheet" href="main.css">

    <!-- ADD JS FILE -->
    <script src="main.js"></script>
  </head>

  <body>
    ...
  <body>
</html>

现在我们需要创建这两个文件。你可以随意更改 CSS 的名称，

在 CSS 文件中，我们将添加以下代码行。

/* main.css */
body {
  background-color: white;
  color: black;
}

.dark-mode {
  background-color: black;
  color: white;
}

在 body 部分，我们指定了默认背景为白色，文字为黑色。然后在 dark-mode 类中，我们指定将背景更改为黑色，文字为白色。

现在我们需要创建 main.js 文件，这是我们暗模式功能的核心。

//main.js

function darkmode() {
  const wasDarkmode = localStorage.getItem('darkmode') === 'true';
  localStorage.setItem('darkmode', !wasDarkmode);
  const element = document.body;
  element.classList.toggle('dark-mode', !wasDarkmode);
}

function onload() {
  document.body.classList.toggle('dark-mode', localStorage.getItem('darkmode') === 'true');
}

成功创建 main.css 和 main.js 文件后，还有最后一件事。

步骤3：

虽然你可能以为已经完成了，但其实并非如此。问问自己这个问题：如果我的网站有多个页面怎么办？如何让每个页面都保持暗黑模式而不恢复到默认的白色背景？答案比你想象的要简单得多。在每个页面的初始 body 标签中添加：

onload="onload()"

就这样。希望对你有帮助！感谢阅读！

CodePen 上的演示

https://codepen.io/mattmarquise/details/MWbrNWe

文章来源：https://dev.to/mattmarquise/implement-dark-mode-on-your-website-5c5a

在您的网站上实施暗模式。

在您的网站上实施暗模式。

目录

步骤1：

第 2 步：

步骤3：

CodePen 上的演示