网站首页 > 基础教程 正文
原文地址:Implement Dark Mode On Your Website.
原文作者:Matthew Marquise
译者 & 校正:HelloGitHub-小鱼干 & 卤蛋
暗黑模式是网站颇受欢迎的功能,用 HTML、CSS、JS 即可实现。但为什么你没有在你的个人网站实现暗黑功能呢?只要这简单的三个步骤,你就可以拥有暗黑模式。实操开始!(译:并不是所有的人都会 CSS,所以这是为什么我会翻译本文的原因,它真的超简单!)
本文目录
- 暗黑模式 Step 1
- 暗黑模式 Step 2
- 暗黑模式 Step 3
- 展示效果
暗黑模式 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 文件后,你现在只用做最后一件事。
暗黑模式 Step 3:
经过上面 2 个步骤,你可能认为暗黑模式已经实现,但其实不是。来问自己一个问题:如果我的网站有多个页面要咋整?如何在每个页面启用黑暗模式而不是默认的白色背景?答案比你想的要简单得多。在每个页面的初始 body tag 中添加:
onload="onload()"
就这么简单,希望它对你有用,谢谢阅读本文^^
展示效果
最后,欢迎优秀的你加入 HelloGitHub 的「译文亦舞」系列,让你的才华舞动起来!把优秀的文章分享给更多的人。要求:
- 平时浏览 GitHub、开源、编程、程序员等英文资讯和文章
- 想把自己阅读到优秀的英文文章分享给更多的人
- 翻译准确但不是直翻或机翻
- 保证每月至少翻译或校正 1 篇高质量文章
- 了解 Markdown 和排版规则
- 联系我
- 上一篇: Deno 1.30 正式发布
- 下一篇: 轻松易懂,一文告诉你什么是http协议?
猜你喜欢
- 2024-11-25 网站复制粘贴收费怎么办
- 2024-11-25 SEO前端meta标示优化
- 2024-11-25 给web页面添加甘特图,只需三条命令!
- 2024-11-25 初识meta标签与SEO——零基础自学网页制作
- 2024-11-25 彻底禁止查看网页源代码及破解
- 2024-11-25 国产化操作系统浏览器自定义协议
- 2024-11-25 Electron 进程间通信的四种方式
- 2024-11-25 PHP页面跳转
- 2024-11-25 如何实现公司各个系统之间的账号互通和SSO统一登陆
- 2024-11-25 10分钟学会用Python抓取电影排行榜
- 最近发表
- 标签列表
-
- gitpush (61)
- pythonif (68)
- location.href (57)
- tail-f (57)
- pythonifelse (59)
- deletesql (62)
- c++模板 (62)
- css3动画 (57)
- c#event (59)
- linuxgzip (68)
- 字符串连接 (73)
- nginx配置文件详解 (61)
- html标签 (69)
- c++初始化列表 (64)
- exec命令 (59)
- canvasfilltext (58)
- mysqlinnodbmyisam区别 (63)
- arraylistadd (66)
- node教程 (59)
- console.table (62)
- c++time_t (58)
- phpcookie (58)
- mysqldatesub函数 (63)
- window10java环境变量设置 (66)
- c++虚函数和纯虚函数的区别 (66)