三个步骤,你就可以拥有网站暗黑模式

2021年3月22日09:15:02 发表评论 106 views

暗黑模式 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 FILEADD 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 文件后,你现在只用做最后一件事。

暗黑模式 Step 3:

经过上面 2 个步骤,你可能认为暗黑模式已经实现,但其实不是。来问自己一个问题:如果我的网站有多个页面要咋整?如何在每个页面启用黑暗模式而不是默认的白色背景?答案比你想的要简单得多。在每个页面的初始 body tag 中添加:

onload="onload()"
复制代码

就这么简单,希望它对你有用,谢谢阅读本文^^

展示效果

作者:HelloGitHub
链接:https://juejin.cn/post/6941153060336975879
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: