/* * 用户中心暗黑模式 * ------------------------------------------------------------------ * 用法：上加 class="dark"，去掉即恢复亮色。切换逻辑见 common.js。 * * 颜色统统走 CSS 变量，方便以后整体调色；亮色模式下变量也有值， * 所以 blade 里可以直接写 var(--c-card) 而不用判断当前主题。 * * 注意：本主题只负责「框架」——侧边栏/顶栏/卡片/表格/表单。 * 页面里写死的行内样式盖不住，已统一改成 var()，见各 blade。 */ :root { --c-body: #f4f6f9; /* 页面底色 */ --c-card: #ffffff; /* 卡片/面板 */ --c-card-2: #fafbfc; /* 卡片内次级块（表头、footer） */ --c-border: #e9ecef; --c-text: #34395e; /* 正文 */ --c-text-muted: #94a3b8; /* 次要说明文字 */ --c-heading: #1e2b3c; --c-sidebar: #ffffff; --c-sidebar-txt: #68779a; --c-input-bg: #ffffff; --c-input-txt: #34395e; --c-hover: #f8f9fa; /* 表格行 hover / 下拉项 hover */ --c-shadow: rgba(0, 0, 0, .05); } html.dark { --c-body: #14181f; --c-card: #1b212b; --c-card-2: #222936; --c-border: #2c3542; --c-text: #c7d0dd; --c-text-muted: #8391a6; --c-heading: #e6ebf2; --c-sidebar: #1b212b; --c-sidebar-txt: #aab6c7; --c-input-bg: #222936; --c-input-txt: #e6ebf2; --c-hover: #262f3c; --c-shadow: rgba(0, 0, 0, .45); } /* 切换时不要闪白。只过渡颜色，不要写 transition:all，否则布局会抖 */ html.dark body, html.dark .card, html.dark .main-sidebar, html.dark .main-navbar { transition: background-color .18s ease, color .18s ease; } /* ---------- 基础骨架 ---------- */ html.dark body, html.dark .main-wrapper { background-color: var(--c-body); color: var(--c-text); } /* 顶栏背后那条渐变色块，亮色下是主题蓝，暗色下压深免得太跳 */ html.dark .navbar-bg { background: linear-gradient(90deg, #2b3550 0%, #1f2738 100%); } html.dark .main-navbar, html.dark .navbar.main-navbar { background-color: var(--c-card); box-shadow: 0 1px 4px var(--c-shadow); } html.dark .navbar .nav-link, html.dark .navbar .nav-link i, html.dark .navbar .form-control { color: var(--c-text) !important; } /* ---------- 侧边栏 ---------- */ html.dark .main-sidebar, html.dark .sidebar-menu li a, html.dark .sidebar-brand a { background-color: var(--c-sidebar); color: var(--c-sidebar-txt); } html.dark .main-sidebar { border-right: 1px solid var(--c-border); } html.dark .sidebar-menu li a { color: var(--c-sidebar-txt); } html.dark .sidebar-menu li a:hover, html.dark .sidebar-menu li.active > a { background-color: var(--c-hover); color: #fff; } /* 分组标题（「采集」「我的」这种） */ html.dark .sidebar-menu li.menu-header { color: var(--c-text-muted); } html.dark .sidebar-menu .dropdown-menu { background-color: var(--c-card-2); } /* ---------- 卡片 / 面板 ---------- */ html.dark .card, html.dark .card-statistic-1, html.dark .card-statistic-2, html.dark .hero, html.dark .accordion .accordion-header, html.dark .accordion .accordion-body { background-color: var(--c-card); color: var(--c-text); box-shadow: 0 1px 4px var(--c-shadow); } html.dark .card-header, html.dark .card-footer { background-color: var(--c-card); border-color: var(--c-border); } html.dark .card-header h4, html.dark .card-title, html.dark h1, html.dark h2, html.dark h3, html.dark h4, html.dark h5, html.dark h6 { color: var(--c-heading); } html.dark .card-body { color: var(--c-text); } /* 统计卡左边的图标块保留原主题色，只是别再叠白底 */ html.dark .card-statistic-1 .card-wrap, html.dark .card-statistic-2 .card-wrap { background-color: transparent; } /* ---------- 表格 ---------- */ html.dark .table { color: var(--c-text); } html.dark .table th { background-color: var(--c-card-2); color: var(--c-heading); border-color: var(--c-border); } html.dark .table td, html.dark .table thead th { border-color: var(--c-border); } html.dark .table-striped tbody tr:nth-of-type(odd) { background-color: rgba(255, 255, 255, .02); } html.dark .table-hover tbody tr:hover, html.dark .table tbody tr:hover { background-color: var(--c-hover); color: var(--c-heading); } html.dark .table-bordered, html.dark .table-bordered td, html.dark .table-bordered th { border-color: var(--c-border); } /* ---------- 表单 ---------- */ html.dark .form-control, html.dark .custom-select, html.dark textarea, html.dark input[type="text"], html.dark input[type="url"], html.dark input[type="email"], html.dark input[type="password"], html.dark input[type="number"], html.dark select { background-color: var(--c-input-bg); border-color: var(--c-border); color: var(--c-input-txt); } html.dark .form-control:focus { background-color: var(--c-input-bg); color: var(--c-input-txt); border-color: #6777ef; box-shadow: 0 0 0 .2rem rgba(103, 119, 239, .25); } /* 占位符太亮会显得比正文还突出 */ html.dark .form-control::placeholder { color: var(--c-text-muted); } html.dark .form-control:disabled, html.dark .form-control[readonly] { background-color: #1a202a; color: var(--c-text-muted); } html.dark label, html.dark .form-group label { color: var(--c-text); } html.dark .input-group-text { background-color: var(--c-card-2); border-color: var(--c-border); color: var(--c-text); } /* ---------- 下拉 / 弹层 ---------- */ html.dark .dropdown-menu { background-color: var(--c-card); border-color: var(--c-border); box-shadow: 0 4px 16px var(--c-shadow); } html.dark .dropdown-item { color: var(--c-text); } html.dark .dropdown-item:hover, html.dark .dropdown-item:focus { background-color: var(--c-hover); color: var(--c-heading); } html.dark .dropdown-title, html.dark .dropdown-divider { border-color: var(--c-border); } html.dark .dropdown-title { color: var(--c-text-muted); } html.dark .modal-content { background-color: var(--c-card); color: var(--c-text); } html.dark .modal-header, html.dark .modal-footer { border-color: var(--c-border); } html.dark .close { color: var(--c-text); text-shadow: none; } /* sweetalert 弹窗（登录成功那个）也要跟着变，否则深色页面上突然闪一块白 */ html.dark .swal-modal { background-color: var(--c-card); } html.dark .swal-title, html.dark .swal-text { color: var(--c-heading); } /* ---------- 杂项 ---------- */ html.dark .main-footer { background-color: var(--c-card); color: var(--c-text-muted); border-top: 1px solid var(--c-border); } html.dark .page-item .page-link { background-color: var(--c-card); border-color: var(--c-border); color: var(--c-text); } html.dark .page-item.active .page-link { background-color: #6777ef; border-color: #6777ef; color: #fff; } html.dark .nav-tabs { border-color: var(--c-border); } html.dark .nav-tabs .nav-link { color: var(--c-text-muted); border-color: transparent; } html.dark .nav-tabs .nav-link.active { background-color: var(--c-card); border-color: var(--c-border) var(--c-border) var(--c-card); color: var(--c-heading); } html.dark .list-group-item { background-color: var(--c-card); border-color: var(--c-border); color: var(--c-text); } html.dark hr { border-color: var(--c-border); } html.dark .text-muted, html.dark small.text-muted { color: var(--c-text-muted) !important; } html.dark .text-dark { color: var(--c-heading) !important; } /* .bg-white 在暗色下就是个纯白洞，必须接管 */ html.dark .bg-white { background-color: var(--c-card) !important; } html.dark .bg-light { background-color: var(--c-card-2) !important; } html.dark .border, html.dark .border-top, html.dark .border-bottom, html.dark .border-left, html.dark .border-right { border-color: var(--c-border) !important; } /* 浅底 alert 在暗色下太刺眼，降透明度保留语义色 */ html.dark .alert-info { background-color: rgba(58, 186, 244, .14); border-color: rgba(58, 186, 244, .3); color: #9bd8f7; } html.dark .alert-success { background-color: rgba(84, 202, 104, .14); border-color: rgba(84, 202, 104, .3); color: #9fe0ad; } html.dark .alert-warning { background-color: rgba(255, 179, 40, .14); border-color: rgba(255, 179, 40, .3); color: #f5cd82; } html.dark .alert-danger { background-color: rgba(252, 84, 75, .14); border-color: rgba(252, 84, 75, .3); color: #f5a29c; } /* 加载遮罩 */ html.dark .loader { background-color: var(--c-body); } /* 图片/二维码这类白底素材，暗色下描个边免得像悬空 */ html.dark .card img.qrcode, html.dark img.bg-white-asset { border: 1px solid var(--c-border); border-radius: 4px; } /* ---------- 顶栏切换按钮 ---------- 注意：feather.replace() 会把换成