只需三步，您就可以拥有一个深色模式的网站

terry 2年前 (2023-09-27) 阅读数 60 #数据结构与算法

深色模式第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。

深色模式第 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 ></script>
  </head>

  <body>
    ...
  <body>
</html>
复制代码

现在我们开始创建。 JS 和 CSS 文件。你可以根据需要更改CSS文件，在这里，我添加了一些代码：

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

.dark-mode {
  background-color: black;
  color: white;
}
复制代码

在模块body中，我们将默认网页背景颜色设置为白色，文本设置为黑色，并在深色中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文件后，现在只需要做一件事。