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

- 统一配色规范: 背景#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
+66 -15
View File
@@ -318,22 +318,73 @@
}
.resize-handle:hover { background: #1a73e8; }
/* ───── 深色模式覆盖 ───── */
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 .content { background: #1a1d21; }
body.dark .tree-item:hover { background: #2d323a; }
body.dark .tree-item.active { background: #355; color:#7ab8ff; }
body.dark .editor-pane, body.dark .preview-pane { background: #1e2228; border-color:#333; }
body.dark input, body.dark textarea, body.dark select {
background: #24282f; color: #e0e0e0; border-color: #3a3f47;
/* ───── 深色模式(专业协调配色)───── */
body.dark {
background: #0f1115;
color: #e6e6e6;
}
body.dark .modal-content { background: #24282f; color:#e0e0e0; }
body.dark .preview-content code, body.dark .preview-content pre { background:#111; }
body.dark .empty-state { color:#888; }
body.dark .btn-secondary { background:#2d323a; color:#ccc; border-color:#3a3f47; }
body.dark .tree-item .folder { color:#7ab8ff; }
body.dark header {
background: #15181e;
box-shadow: 0 2px 8px rgba(0,0,0,0.5);
border-bottom: 1px solid #232733;
}
body.dark header h1 { color: #e6e6e6; }
body.dark .btn-secondary { background: #20242e; color: #c9ced8; border: 1px solid #2e3440; }
body.dark .btn-secondary:hover { background: #2a3040; color: #e6e6e6; }
body.dark .btn-icon { color: #9aa0aa; }
body.dark .btn-icon:hover { background: #20242e; color: #e6e6e6; }
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 h2 { color: #9aa0aa; }
body.dark .tree-item { color: #c9ced8; }
body.dark .tree-item:hover { background: #1e232d; }
body.dark .tree-item.active { background: #1b2a44; color: #7aa2f7; }
body.dark .tree-item .actions button {
background: #1e232d; border-color: #2e3440; color: #9aa0aa;
}
body.dark .tree-item .actions button:hover { background: #2a3040; color: #e6e6e6; }
body.dark .content { background: #0f1115; }
body.dark .editor-pane {
background: #12151b;
border-right: 1px solid #232733;
}
body.dark .editor-header, body.dark .editor-meta {
border-bottom: 1px solid #232733;
}
body.dark input, body.dark textarea, body.dark select {
background: #1a1e26; color: #e6e6e6; border-color: #2e3440;
}
body.dark input::placeholder, body.dark textarea::placeholder { color: #6b7280; }
body.dark input:focus, body.dark textarea:focus { border-color: #6aa1f7; }
body.dark .editor-content textarea { background: #12151b; color: #e6e6e6; }
body.dark .editor-meta label { color: #9aa0aa; }
body.dark .preview-pane { background: #12151b; }
body.dark .preview-header { border-bottom: 1px solid #232733; color: #9aa0aa; }
body.dark .preview-content h1, body.dark .preview-content h2, body.dark .preview-content h3 { color: #f0f2f5; }
body.dark .preview-content p { color: #c9ced8; }
body.dark .preview-content code { background: #1e232d; color: #e0a46a; }
body.dark .preview-content pre { background: #0b0d12; border: 1px solid #232733; }
body.dark .preview-content pre code { background: none; color: #d4d7de; }
body.dark .preview-content blockquote { border-left-color: #6aa1f7; color: #9aa0aa; }
body.dark .empty-state { color: #9aa0aa; }
body.dark .empty-state svg { fill: #2a2f3a; }
body.dark .empty-state h3 { color: #c9ced8; }
body.dark .modal-content { background: #1a1e26; color: #e6e6e6; }
body.dark .modal-content h3 { color: #f0f2f5; }
/* 回收站/版本/分享面板内分割线 */
body.dark #trashList div[style*="border-bottom"], body.dark #versionsList div[style*="border-bottom"] { border-bottom-color: #2e3440 !important; }
</style>
</head>
<body>