超簡單的網(wǎng)站暗黑模式，它真的超簡單！
原文地址：Implement Dark Mode On Your Website.
原文作者：Matthew Marquise（已授權）
譯者 & 校正：HelloGitHub-小魚干 & 鹵蛋
暗黑模式是網(wǎng)站頗受歡迎的功能，用 HTML、CSS、JS 即可實現(xiàn)。但為什么你沒有在你的個人網(wǎng)站實現(xiàn)暗黑功能呢？只要這簡單的三個步驟，你就可以擁有暗黑模式。實操開始?。ㄗg：并不是所有的人都會 CSS，所以這是為什么我會翻譯本文的原因，它真的超簡單?。?/p>
本文目錄
暗黑模式 Step 1 暗黑模式 Step 2 暗黑模式 Step 3 效果展示
暗黑模式 Step 1：
如果你還沒有個人網(wǎng)站，先簡單地創(chuàng)建一個 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>
有了網(wǎng)站之后，下面來實現(xiàn) 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>
現(xiàn)在我們要開始創(chuàng)建 JS 和 CSS 文件了。你可以隨意更改你的 CSS 文件，在這里，我添加了一些代碼：
/* main.css */
body {
background-color: white;
color: black;
}
.dark-mode {
background-color: black;
color: white;
}
在 body 模塊，我們設定默認網(wǎng)頁背景色為白色、文本為黑色，而在 dark-mode 模塊，我們將網(wǎng)頁背景色變?yōu)楹谏?、文本則是白色。
好了，我們要創(chuàng)建 main.js 文件了，這是實現(xiàn)暗黑功能的關鍵；
//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');
}
成功創(chuàng)建 CSS 和 JS 文件后，你現(xiàn)在只用做最后一件事。
暗黑模式 Step 3：
經(jīng)過上面 2 個步驟，你可能認為暗黑模式已經(jīng)實現(xiàn)，但其實不是。來問自己一個問題：如果我的網(wǎng)站有多個頁面要咋整？如何在每個頁面啟用黑暗模式而不是默認的白色背景？答案比你想的要簡單得多。在每個頁面的初始 body tag 中添加：
onload="onload()"
就這么簡單，希望它對你有用，謝謝閱讀本文^^
效果展示
體驗下暗黑模式：
感謝原作者的翻譯授權：
最后，歡迎優(yōu)秀的你加入 HelloGitHub 的「譯文亦舞」系列，讓你的才華舞動起來！把優(yōu)秀的文章分享給更多的人。要求：
平時瀏覽 GitHub、開源、編程、程序員等英文資訊和文章 想把自己閱讀到優(yōu)秀的英文文章分享給更多的人 翻譯準確但不是直翻或機翻 保證每月至少翻譯或校正 1 篇高質量文章 了解 Markdown 和排版規(guī)則 聯(lián)系微信：xueweihan （備注：翻譯）
??「點擊關注」更多驚喜等待你！