长时间面对屏幕管理书签和浏览笔记，视觉舒适度至关重要。MarkStackAI 采用深色优先的设计策略，同时提供完整的浅色主题支持，让你在任何环境和偏好下都能获得最佳的使用体验。
深色优先的设计理念
MarkStackAI 的默认主题是深色模式。这不是随意的选择，而是基于以下考量：
- 减少视觉疲劳：深色背景配合柔和的文字颜色，在长时间使用时对眼睛的刺激更小，尤其是在夜间或低光环境下
- 节省电量：在 OLED/AMOLED 屏幕上，深色像素几乎不耗电，深色主题可以显著延长设备续航
- 信息层次更清晰：深色背景下，卡片、弹窗等前景元素通过微妙的亮度差异自然地分出层次，UI 的空间感更强
- 专注感更强：深色界面减少了周围元素的视觉干扰，让用户的注意力更容易集中在内容本身
MarkStackAI 的深色主题使用了精心调配的色彩方案：主背景色 #0a0c10 是带微蓝的深灰黑而非纯黑，面板色 #0f1117 和卡片色 #13161e 形成自然的层级递进。这样的设计既保持了深邃的视觉观感，又避免了纯黑背景带来的「屏幕关闭感」。
完整的浅色主题
并非所有人都偏爱深色模式。在阳光充足的办公环境中，浅色主题往往具有更好的可读性。MarkStackAI 提供了完整的浅色主题，覆盖系统中每一个页面和组件：
- 主背景切换为
#f8f9fb的温暖浅灰，而非刺眼的纯白 - 面板和卡片使用
#ffffff白色，通过细微的边框和投影区分层级 - 文字颜色调整为
#1a1d23的深灰黑，确保在浅色背景上有足够的对比度 - 导航栏背景变为半透明白色
rgba(248,249,251,.92)，保持毛玻璃效果 - 所有按钮、输入框、对话框、表格等组件都有对应的浅色样式
浅色主题不是简单的「反色」，而是经过独立设计的完整配色方案。每一个元素的颜色、边框、阴影都针对浅色背景做了专门调整。
自动跟随系统偏好
MarkStackAI 默认会自动检测操作系统的主题偏好。如果你的 macOS、Windows 或手机系统设置了深色模式，MarkStackAI 会自动使用深色主题；如果系统是浅色模式，则自动使用浅色主题。
这个检测通过浏览器的 prefers-color-scheme 媒体查询实现：
// 初始化主题（页面加载时立即执行）
var t = localStorage.getItem('ms-theme');
if (!t) {
t = window.matchMedia('(prefers-color-scheme: light)')
.matches ? 'light' : 'dark';
}
document.documentElement.dataset.theme = t;这段代码放在 <head> 中同步执行，确保在页面渲染之前就确定主题，避免了「白屏闪烁」的问题——用户永远不会看到主题切换瞬间的颜色跳变。
手动切换与持久化
在页面右上角的导航栏中，你会看到一个主题切换按钮：深色模式下显示月亮图标，浅色模式下显示太阳图标。点击即可在两种主题之间即时切换。
你的选择会通过 localStorage 持久化保存。这意味着：
- 刷新页面后主题不会重置
- 关闭浏览器后重新打开，主题设置仍然保留
- 手动选择会覆盖系统偏好自动检测——如果你手动选了深色，即使系统改为浅色也不会影响
- 清除浏览器存储或使用新设备时，会回退到自动检测系统偏好
100+ CSS 变量设计系统
MarkStackAI 的主题系统基于 CSS 自定义属性（Custom Properties）构建。整个系统定义了超过 100 个 CSS 变量，涵盖：
基础色彩
--bg、--bg-panel、--bg-card— 三级背景色，构成视觉层次--text、--text2、--text-m— 三级文字色，主要内容 / 次要信息 / 辅助说明--accent— 品牌强调色#4f8ef7，用于链接、按钮和交互元素--ok、--warn、--err— 语义色：成功/警告/错误
边框与分隔
--border— 标准边框色，用于卡片、面板的分隔--border-lt— 较亮的边框色，用于 hover 状态和次要分隔线--border-strong— 较深的边框色，用于需要强调的分隔
功能变量
--accent-glow— 强调色的半透明版本，用于背景高亮和发光效果--gradient-1、--gradient-2— 预定义渐变色，用于主要按钮和装饰元素--font、--font-mono— 字体栈变量，确保中英文混排的一致性--r、--r-lg— 圆角半径变量，保持全局圆角风格一致
跨页面一致性
主题系统覆盖了 MarkStackAI 的所有页面，不存在某个页面「漏掉」了主题适配的情况：
- 书签管理页 — 书签卡片、目录树、编辑对话框
- 笔记系统 — 三栏布局、Markdown 编辑器、实时预览
- 公开导航页 — 分类网格、搜索栏、世界时钟、金融行情
- 健康检测页 — 统计卡片、结果列表、状态标签
- 分享管理页 — 分享卡片、用户选择对话框、密码设置
- 系统管理页 — 用户表格/卡片、分组管理
- 分享查看页 — 公开访问的分享页面也完整支持主题切换
在开发过程中，所有硬编码的颜色值（如 #ef4444、#22c55e）都已被替换为对应的 CSS 变量（如 var(--danger)、var(--success)），确保主题切换时每一个像素都正确响应。
试试看：你正在阅读的这篇文章本身就支持主题切换！点击右上角的月亮/太阳图标，即刻体验深色与浅色主题的切换效果。
无论你是习惯深色模式的夜猫子，还是偏爱浅色界面的日间工作者，MarkStackAI 的主题系统都能为你提供一致、舒适、精致的视觉体验。
← 返回博客列表