超简单的网站暗黑模式，它真的超简单！

HelloGitHub

发布于 2021-05-14 10:53:45

9200

发布于 2021-05-14 10:53:45

文章被收录于专栏：HelloGitHub

原文地址：Implement Dark Mode On Your Website. 原文作者：Matthew Marquise（已授权）译者 & 校正：HelloGitHub-小鱼干 & 卤蛋

暗黑模式是网站颇受欢迎的功能，用 HTML、CSS、JS 即可实现。但为什么你没有在你的个人网站实现暗黑功能呢？只要这简单的三个步骤，你就可以拥有暗黑模式。实操开始！（译：并不是所有的人都会 CSS，所以这是为什么我会翻译本文的原因，它真的超简单！）

暗黑模式 Step 1：

如果你还没有个人网站，先简单地创建一个 HTML 文件。

<!-- 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。

暗黑模式 Step 2：

开始往 HTML 里添加我们想要的东西，先来添加链接 JS 和 CSS 文件的方法，就像 ADD CSS FILE 和 ADD JS FILE 注释下的那样：

<!-- 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>

现在我们要开始创建 JS 和 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');
}

成功创建 CSS 和 JS 文件后，你现在只用做最后一件事。