/* =============================================================================
* 官网统一主题样式（浅色 / 深色）
*
* 用法：在所有管理/前台页面 引入本文件（theme.css）与 theme.js。
*
*
*
* 主题通过 切换；theme.js 负责注入切换按钮、
* 读写 localStorage（键 hlx_theme）并应用主题。
* ========================================================================== */
/* ==================== 浅色主题（默认）变量 ==================== */
:root {
--t-bg: #f0f2f5;
--t-surface: #ffffff;
--t-surface-2: #f8f9fa;
--t-border: #e2e8f0;
--t-border-strong: #cbd5e1;
--t-text: #1e293b;
--t-text-muted: #64748b;
--t-primary: #2B5B84;
--t-primary-hover: #245073;
--t-primary-text: #ffffff;
--t-danger: #e74c3c;
--t-danger-hover: #c0392b;
--t-success: #16a34a;
--t-warning: #f59e0b;
--t-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
--t-modal-mask: rgba(15, 23, 42, 0.5);
--t-input-bg: #ffffff;
--t-hover: #f1f5f9;
}
/* ==================== 深色主题变量 ==================== */
html[data-theme="dark"] {
--t-bg: #0f172a;
--t-surface: #1e293b;
--t-surface-2: #334155;
--t-border: #334155;
--t-border-strong: #475569;
--t-text: #e2e8f0;
--t-text-muted: #94a3b8;
--t-primary: #3b82f6;
--t-primary-hover: #2563eb;
--t-primary-text: #ffffff;
--t-danger: #ef4444;
--t-danger-hover: #dc2626;
--t-success: #22c55e;
--t-warning: #f59e0b;
--t-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
--t-modal-mask: rgba(0, 0, 0, 0.65);
--t-input-bg: #0f172a;
--t-hover: #2b3b52;
}
/* ==================== 基础覆盖 ==================== */
html[data-theme="dark"] body {
background: var(--t-bg);
color: var(--t-text);
}
html[data-theme="dark"] .header,
html[data-theme="dark"] .sidebar,
html[data-theme="dark"] .content,
html[data-theme="dark"] main,
html[data-theme="dark"] footer {
background: var(--t-bg);
color: var(--t-text);
}
html[data-theme="dark"] .card,
html[data-theme="dark"] table,
html[data-theme="dark"] .loginBox,
html[data-theme="dark"] .modal {
background: var(--t-surface);
color: var(--t-text);
border-color: var(--t-border);
}
html[data-theme="dark"] th,
html[data-theme="dark"] td {
color: var(--t-text);
border-color: var(--t-border);
}
html[data-theme="dark"] th {
background: var(--t-surface-2);
}
html[data-theme="dark"] tr:hover {
background: var(--t-hover);
}
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
background: var(--t-input-bg);
color: var(--t-text);
border-color: var(--t-border-strong);
}
html[data-theme="dark"] label {
color: var(--t-text-muted);
}
html[data-theme="dark"] .page-title,
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] .brand h1,
html[data-theme="dark"] .brand p,
html[data-theme="dark"] .card h2,
html[data-theme="dark"] .card p {
color: var(--t-text);
}
html[data-theme="dark"] .text-muted,
html[data-theme="dark"] .header-info,
html[data-theme="dark"] .card .lbl,
html[data-theme="dark"] .empty,
html[data-theme="dark"] .footer {
color: var(--t-text-muted);
}
html[data-theme="dark"] .modal-mask {
background: var(--t-modal-mask);
}
html[data-theme="dark"] .btn.gray {
background: var(--t-surface-2);
color: var(--t-text);
}
html[data-theme="dark"] .alert.err {
background: rgba(239, 68, 68, 0.15);
color: #fca5a5;
}
html[data-theme="dark"] .alert.ok {
background: rgba(34, 197, 94, 0.15);
color: #86efac;
}
/* ==================== 主题切换按钮 ==================== */
.theme-toggle {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 14px;
border: 1px solid var(--t-border-strong);
border-radius: 8px;
background: var(--t-surface);
color: var(--t-text);
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
font-family: inherit;
}
.theme-toggle:hover {
border-color: var(--t-primary);
color: var(--t-primary);
}
html[data-theme="dark"] .theme-toggle {
background: var(--t-surface-2);
color: var(--t-text);
}
/* ==================== 过渡动画（可选，平顺切换） ==================== */
html.theme-transition,
html.theme-transition * {
transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease !important;
}