📅 最后修改于: 2023-12-03 15:23:43.717000 🧑 作者: Mango
夜间黑暗模式 CSS 是一种能够在网站上应用的 CSS 样式，它能让整个网页的背景变为黑色，文字变为白色，以增强用户在夜间环境下的阅读体验。这种 CSS 样式不仅仅是为了美观，更重要的是帮助用户减少眼睛疲劳和保护视力。
使用夜间黑暗模式 CSS 很方便。你只需要在 HTML 文件中的 <head> 标签中添加一个 <link> 标签来引用 CSS 文件即可。
<head>
<link rel="stylesheet" type="text/css" href="dark-mode.css">
</head>
下面是夜间黑暗模式 CSS 的代码，你可以通过修改其中的颜色值来调整颜色样式。
/* 夜间黑暗模式 CSS */
body {
background-color: #1a1a1a; /*页面的背景颜色*/
color: #f1f1f1; /*页面的文本颜色*/
}
h1, h2, h3, h4, h5, h6 {
color: #fff; /*标题和副标题的文本颜色*/
}
a {
color: #fafafa; /*链接的文本颜色*/
}
a:hover {
color: #fff; /*链接悬停时的文本颜色*/
}
/* 按钮的颜色 */
button, input[type="reset"], input[type="button"], input[type="submit"], .btn {
background-color: #444;
color: #f2f2f2;
border-color: #7f7f7f;
}
/* 表格的颜色 */
th {
background-color: #222;
color: #f2f2f2;
border-color: #7f7f7f;
}
td {
background-color: #333;
color: #f2f2f2;
border-color: #7f7f7f;
}
/* 代码块的颜色 */
code, pre {
background-color: #1d1f21;
color: #fff;
}
夜间黑暗模式 CSS 可以在现代浏览器中使用，目前的兼容性如下：
夜间黑暗模式 CSS 能够有效地优化用户在夜间环境下的视觉体验，帮助用户减少眼睛疲劳和保护视力。如果你对这个 CSS 样式有疑问或者建议，欢迎在下面留言和讨论。