/**
* 暗色主题样式
* 通过 或 启用
*/
[data-theme="dark"] {
/* 主色调调整（在暗色背景下更亮） */
--color-primary: #b44d00;
--color-primary-light: #cc5500;
--color-primary-dark: #993c00;
/* 背景色 */
--color-bg: #1a1a1a;
--color-bg-secondary: #2a2a2a;
--color-bg-tertiary: #333333;
/* 文本色 */
--color-text: #e0e0e0;
--color-text-light: #999999;
--color-text-lighter: #666666;
/* 边框色 */
--color-border: #444444;
--color-border-light: #555555;
/* 阴影调整 */
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
--shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.5);
}
/* 暗色主题下的特定样式覆盖 */
[data-theme="dark"] body {
background-color: var(--color-bg);
color: var(--color-text);
}
[data-theme="dark"] .header {
background-color: var(--color-bg-secondary);
border-bottom-color: var(--color-border);
}
[data-theme="dark"] .footer {
background-color: var(--color-bg-secondary);
border-top-color: var(--color-border);
}
[data-theme="dark"] .card {
background-color: var(--color-bg-secondary);
border-color: var(--color-border);
}
[data-theme="dark"] .card:hover {
box-shadow: var(--shadow-md);
}
[data-theme="dark"] .btn-outline {
border-color: var(--color-primary);
color: var(--color-primary);
}
[data-theme="dark"] .btn-outline:hover {
background-color: var(--color-primary);
color: #fff;
}
[data-theme="dark"] .filter-card,
[data-theme="dark"] .filter-bar {
background-color: var(--color-bg-secondary);
border-color: var(--color-border);
}
[data-theme="dark"] .filter-select,
[data-theme="dark"] .filter-search {
background-color: var(--color-bg-tertiary);
border-color: var(--color-border);
color: var(--color-text);
}
[data-theme="dark"] .filter-select:focus,
[data-theme="dark"] .filter-search:focus {
border-color: var(--color-primary);
}
[data-theme="dark"] .modal-content {
background-color: var(--color-bg-secondary);
border-color: var(--color-border);
}
[data-theme="dark"] .sidebar {
background-color: var(--color-bg-secondary);
border-left-color: var(--color-border);
}
[data-theme="dark"] .sidebar-overlay {
background-color: rgba(0, 0, 0, 0.7);
}
[data-theme="dark"] .toc-sidebar {
background-color: var(--color-bg-secondary);
border-right-color: var(--color-border);
}
[data-theme="dark"] pre,
[data-theme="dark"] code {
background-color: var(--color-bg-tertiary);
color: var(--color-text);
}
[data-theme="dark"] blockquote {
border-left-color: var(--color-primary);
background-color: var(--color-bg-tertiary);
}
[data-theme="dark"] table th {
background-color: var(--color-bg-tertiary);
}
[data-theme="dark"] table td {
border-bottom-color: var(--color-border);
}
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] textarea {
background-color: var(--color-bg-tertiary);
border-color: var(--color-border);
color: var(--color-text);
}
[data-theme="dark"] input[type="text"]:focus,
[data-theme="dark"] input[type="email"]:focus,
[data-theme="dark"] input[type="password"]:focus,
[data-theme="dark"] textarea:focus {
border-color: var(--color-primary);
}
/* 暗色主题下的 SVG 图标颜色调整 */
[data-theme="dark"] .icon {
stroke: var(--color-text);
}
[data-theme="dark"] .icon-primary {
stroke: var(--color-primary);
}
/* 暗色主题下的滚动条样式 */
[data-theme="dark"] ::-webkit-scrollbar {
width: 8px;
height: 8px;
}
[data-theme="dark"] ::-webkit-scrollbar-track {
background: var(--color-bg-tertiary);
}
[data-theme="dark"] ::-webkit-scrollbar-thumb {
background: var(--color-border-light);
border-radius: 4px;
}
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
background: var(--color-text-light);
}
/* 暗色主题下的选中文本颜色 */
[data-theme="dark"] ::selection {
background-color: var(--color-primary);
color: #fff;
}