69 lines
4.5 KiB
Markdown
69 lines
4.5 KiB
Markdown
---
|
|
title: 为什么我觉得网页昼夜切换那么重要
|
|
date: '2026-01-23T19:34:10+08:00'
|
|
slug: why-dark-mode-matters
|
|
draft: false
|
|
categories:
|
|
- 技术
|
|
- 生活
|
|
tags:
|
|
- TailwindCSS
|
|
- 暗黑模式
|
|
- 用户体验
|
|
- 吐槽
|
|
author: 小赵同学
|
|
layout: post
|
|
status: public
|
|
ai_comment: >-
|
|
作为一个深夜刷手机的资深选手，这篇简直是我的互联网嘴替！被闪光弹袭击的体验太真实了，现在看到不支持暗黑模式的网站都会虎躯一震。Tailwind
|
|
CSS的黑暗魔法听起来好心动，不过更心疼博主每天要接受公司大白屏的“酷刑”——建议把这篇甩给产品经理当需求文档（笑）。最后说句掏心窝的：所有深夜写代码还惦记读者眼睛的博主，都是人间天使！
|
|
---
|
|
|
|
这篇是我下班在地铁通勤路上编写的，我认为一个网站支持暗黑模式（Dark Mode），真的很重要。
|
|
|
|
不知道大家有没有这样的经历：大晚上躲在被窝里刷手机，打开一个网页，突然一道白光刺瞎双眼，那种感觉简直就像是被闪光弹击中一样。从那一刻起，我就深刻意识到，博客的昼夜切换不仅仅是一个“酷炫”的功能，更是对博友眼睛最基本的尊重。
|
|
|
|
## 心中的一个疙瘩
|
|
|
|
其实，我的这个博客主题 **Ying** 在此之前一直是没有暗黑模式的。这一直是我心中的一个疙瘩。
|
|
|
|
这个主题我也用了快三年了，早期的代码里堆积了大量魔改的 CSS 样式，可以说是“屎山”也不为过。每次想加个暗黑模式，一看到那错综复杂的层叠样式表，我就头大，只能作罢。
|
|
|
|
但每次逛别人的博客，看到右上角那个精致的太阳/月亮切换按钮，轻轻一点，页面瞬间从明亮转为深邃，我都羡慕不已。尤其是在深夜，那种深色背景带来的沉浸感和舒适感，真的是白色背景无法比拟的。每次回到自己的博客，看到那惨白惨白的背景，总感觉少了点什么，既不护眼，也不够酷。
|
|
|
|
## Tailwind CSS 4：真香警告
|
|
|
|
最近这段时间，我开始接触并深度使用 **Tailwind CSS v4**。不得不说，这个原子化的 CSS 框架真的是太优秀了。
|
|
|
|
以前写 CSS，总是要在各种类名之间纠结，还要处理复杂的层叠关系。用了 Tailwind 之后，原子化的写法简直不要太爽，想要什么样式直接堆 class 就行，开发效率直线起飞。
|
|
|
|
最让我惊喜的是它对昼夜切换（Dark Mode）的适配，简直是“手拿把掐”。只需要在 class 前面加一个 `dark:` 前缀，就能轻松定义深色模式下的样式。
|
|
|
|
特别是官网推荐的 **Color Slate** 色系，简直是为夜晚而生。它不是那种死黑死黑的纯黑（#000000），而是一种带有蓝灰色调的高级灰。我毫不犹豫地选择了它作为 Ying 主题暗夜模式的主色调。这种颜色既保留了深色的沉稳，又不会让文字显得过于刺眼，阅读体验极佳。这种“高级感”正是我一直想要的。
|
|
|
|
|
|
|
|
## 来自“瞎眼”打工人的吐槽
|
|
|
|
说完了开心的技术探索，再来吐槽一下糟心的工作。
|
|
|
|
我们公司的产品是一个 Web 端的数据运维平台。作为一名苦逼的打工人，我每天的工作就是盯着这个屏幕，监控数据、排查故障。
|
|
|
|
关键是，这个平台它**没有暗黑模式**！
|
|
|
|
你能想象吗？每天对着一个高亮的大白屏超过 8 个小时，尤其是有时候加班到晚上，办公室灯光一关，那个屏幕亮得简直像个探照灯，直射我的视网膜。每天下班回家，眼睛都酸胀得不行，感觉快要瞎了。
|
|
|
|
跟同事吐槽过无数次，希望能加个暗黑模式，结果永远是现在能跑起来已经很不错了。
|
|
|
|
无奈之下，我只能自力更生，给浏览器装了个 **Dark Reader** 插件，强制把公司的网页转成暗黑模式。虽然有时候颜色渲染会有点怪，图标也会变糊，但至少，我的眼睛算是保住了。
|
|
|
|
## 结语
|
|
|
|
正是因为自己在工作中饱受“光污染”的折磨，我才更坚定地要把博客的暗黑模式做好。
|
|
|
|
所以，无论是为了满足自己的强迫症，还是为了给深夜来访的朋友们一双“护眼符”，我都必须把 Ying 主题的昼夜切换功能做出来，而且要用最舒服的 Slate 配色，做到极致。
|
|
|
|
悄悄告诉你，我已经在 Ying 主题中实现了暗黑模式，并且用 Slate 配色，这里有个小机关，点击头像即可切换哦！
|
|
|
|
希望今晚的你，能在这个深色的页面里，读得舒服，睡得安稳。
|