AI-Agent/note-manager
1
0
Fork 0
Code Issues Pull Requests Activity

style: 重做深色模式为专业协调配色, 全面覆盖前后台全部元素

Browse Source 
- 统一配色规范: 背景#0f1115, 面板#15181e/#12151b, 边框#232733,
  文字层级 #e6e6e6/#c9ced8/#9aa0aa/#6b7280, 强调蓝#6aa1f7
- 前台: 补全 header/搜索框/侧栏/树/筛选/列表/标签/目录/正文/代码块/空状态
- 后台: 补全 header/侧栏/树/编辑器/预览区/输入框/按钮/弹窗/面板分割线
- 修复之前浅色混搭、active色块突兀、输入框白底等视觉问题
- 后台页面为服务端模板, 变更后需重启加载; 前台c.File动态生效
This commit is contained in:
Your Name
2026-08-11 11:23:51 +08:00
parent 8c8501d969
commit fa2d4d7cbf
2 changed files with 150 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/index.html
+84 -12
View File
@@ -28,18 +28,90 @@
.task-checkbox { margin-right: 6px; vertical-align: middle; width: 15px; height: 15px; }
.task-done { text-decoration: line-through; color: #888; }
.mermaid { text-align: center; margin: 16px 0; overflow-x: auto; }
/* ───── 深色模式覆盖 ───── */
body.dark { background: #1a1d21; color: #e0e0e0; }
body.dark header { background: #20242a; box-shadow: 0 1px 3px rgba(0,0,0,0.4); }
body.dark .sidebar { background: #23272e; border-color: #333; }
body.dark .main { background: #1a1d21; }
body.dark .search-box { background: #2d323a; }
body.dark .search-box input { color: #e0e0e0; }
body.dark .note-detail { background: #1e2228; }
body.dark .note-content pre, body.dark .note-content code { background: #111; }
body.dark .tree-item:hover { background: #2d323a; }
body.dark .toc-sidebar { border-color: #333; }
body.dark a { color: #7ab8ff; }
/* ───── 深色模式（专业协调配色）───── */
body.dark {
background: #0f1115;
color: #e6e6e6;
}
body.dark header {
background: #15181e;
box-shadow: 0 1px 4px rgba(0,0,0,0.5);
border-bottom: 1px solid #232733;
}
body.dark header h1 { color: #6aa1f7; }
body.dark .search-box { background: #20242e; }
body.dark .search-box svg { fill: #8b93a3; }
body.dark .search-box input { color: #e6e6e6; }
body.dark .search-box input::placeholder { color: #6b7280; }
body.dark .main { background: #0f1115; }
body.dark .sidebar {
background: #15181e;
border-right: 1px solid #232733;
}
body.dark .sidebar-header { border-bottom: 1px solid #232733; }
body.dark .sidebar-header h3 { color: #c9ced8; }
body.dark .sidebar-section h4 { color: #6b7280; }
body.dark .tree-node:hover { background: #1e232d; }
body.dark .tree-node.active { background: #1b2a44; color: #7aa2f7; }
body.dark .tree-toggle svg { fill: #6b7280; }
body.dark .tree-label { color: #c9ced8; }
body.dark .tree-icon.folder svg { fill: #d9963d; }
body.dark .tree-icon.note svg { fill: #4a9cf5; }
body.dark .filter-area {
background: #15181e;
border-top: 1px solid #232733;
}
body.dark .filter-item { color: #9aa0aa; }
body.dark .filter-item svg { fill: #9aa0aa; }
body.dark .filter-item:hover { background: #1e232d; }
body.dark .filter-item.active { background: #1b2a44; color: #7aa2f7; }
body.dark .filter-item.active svg { fill: #7aa2f7; }
body.dark .note-list { border-top: 1px solid #232733; }
body.dark .note-item:hover { background: #1e232d; }
body.dark .note-item.active { background: #1b2a44; }
body.dark .note-item h4 { color: #e6e6e6; }
body.dark .note-item .preview { color: #9aa0aa; }
body.dark .note-item .meta { color: #6b7280; }
body.dark .note-item .tag { background: #1e3a5f; color: #7aa2f7; }
body.dark .content { background: #0f1115; }
body.dark .toc-sidebar {
background: #101318;
border-right: 1px solid #232733;
}
body.dark .toc-title { color: #6b7280; }
body.dark .toc-link { color: #9aa0aa; }
body.dark .toc-link:hover { background: #1e232d; color: #e6e6e6; }
body.dark .toc-link.active { background: #1b2a44; color: #7aa2f7; border-left-color: #7aa2f7; }
body.dark .toc-link.level-3 { color: #6b7280; }
body.dark .note-detail h1 { color: #f0f2f5; }
body.dark .note-detail .meta {
color: #9aa0aa;
border-bottom: 1px solid #232733;
}
body.dark .note-detail .tag { background: #1e3a5f; color: #7aa2f7; }
body.dark .note-content { color: #c9ced8; }
body.dark .note-content h1, body.dark .note-content h2, body.dark .note-content h3 { color: #f0f2f5; }
body.dark .note-content code { background: #1e232d; color: #e0a46a; }
body.dark .note-content pre { background: #0b0d12; border: 1px solid #232733; }
body.dark .note-content pre code { background: none; color: #d4d7de; }
body.dark .note-content blockquote { border-left-color: #6aa1f7; color: #9aa0aa; }
body.dark .note-content a { color: #7aa2f7; }
body.dark .empty-state { color: #9aa0aa; }
body.dark .empty-state svg { fill: #2a2f3a; }
body.dark .empty-state h2 { color: #c9ced8; }
body.dark footer { color: #6b7280; }
body.dark footer a { color: #7aa2f7; }
body.dark .task-done { color: #6b7280; }
header {
background: #fff;
padding: 16px 24px;