/* ============================================================ 暗色主题样式通过或 body.dark 生效仅覆盖颜色变量，不改变布局结构 ============================================================ */ /* --- Tabler / Bootstrap 暗色变量覆盖 --- */ body.dark { --tblr-bg-surface: #1e1e2e; --tblr-bg-surface-secondary: #2a2a3e; --tblr-body-bg: #1e1e2e; --tblr-body-color: #e4e4ef; --tblr-border-color: #3a3a4e; --tblr-border-color-light: #4a4a5e; --tblr-card-bg: #2a2a3e; --tblr-card-cap-bg: rgba(255, 255, 255, 0.03); --tblr-heading-color: #e4e4ef; --tblr-muted: #9ca3af; --tblr-secondary: #9ca3af; --tblr-table-bg: transparent; --tblr-table-color: #e4e4ef; --tblr-table-striped-color: #e4e4ef; --tblr-table-striped-bg: rgba(255, 255, 255, 0.02); --tblr-table-hover-bg: rgba(255, 255, 255, 0.05); --tblr-table-active-bg: rgba(255, 255, 255, 0.06); --tblr-input-bg: #252538; --tblr-input-border-color: #3a3a4e; --tblr-input-color: #e4e4ef; --tblr-input-placeholder-color: #6b7280; --tblr-input-disabled-bg: #2a2a3e; --tblr-form-check-input-bg: #252538; --tblr-form-check-border-color: #3a3a4e; --tblr-dropdown-bg: #2a2a3e; --tblr-dropdown-color: #e4e4ef; --tblr-dropdown-border-color: #3a3a4e; --tblr-dropdown-hover-bg: rgba(255, 255, 255, 0.06); --tblr-dropdown-active-bg: #4263eb; --tblr-dropdown-divider-bg: #3a3a4e; --tblr-modal-bg: #2a2a3e; --tblr-modal-content-bg: #2a2a3e; --tblr-modal-header-border-color: #3a3a4e; --tblr-modal-footer-border-color: #3a3a4e; --tblr-nav-link-color: #c4b5d2; --tblr-nav-link-hover-color: #ffffff; --tblr-navbar-bg: #2a2a3e; --tblr-navbar-color: #e4e4ef; --tblr-footer-bg: #2a2a3e; --tblr-list-group-bg: #2a2a3e; --tblr-list-group-color: #e4e4ef; --tblr-list-group-border-color: #3a3a4e; --tblr-list-group-hover-bg: rgba(255, 255, 255, 0.04); --tblr-badge-bg: #3a3a4e; --tblr-badge-color: #e4e4ef; --tblr-code-color: #f8d7a8; --tblr-pre-color: #e4e4ef; --tblr-highlight-bg: #3a3a4e; --tblr-alert-info-bg: #1e3a5f; --tblr-alert-info-border-color: #2563eb; --tblr-alert-info-color: #93c5fd; --tblr-alert-success-bg: #14532d; --tblr-alert-success-border-color: #16a34a; --tblr-alert-success-color: #86efac; --tblr-alert-warning-bg: #78350f; --tblr-alert-warning-border-color: #d97706; --tblr-alert-warning-color: #fcd34d; --tblr-alert-danger-bg: #7f1d1d; --tblr-alert-danger-border-color: #dc2626; --tblr-alert-danger-color: #fca5a5; --tblr-pagination-bg: #2a2a3e; --tblr-pagination-border-color: #3a3a4e; --tblr-pagination-color: #e4e4ef; --tblr-pagination-hover-bg: rgba(255, 255, 255, 0.06); --tblr-pagination-disabled-color: #6b7280; --tblr-progress-bg: #3a3a4e; --tblr-tooltip-bg: #4a4a5e; --tblr-popover-bg: #2a2a3e; --tblr-popover-border-color: #3a3a4e; --tblr-popover-header-bg: #3a3a4e; --tblr-popover-header-color: #e4e4ef; --tblr-popover-body-color: #c4b5d2; --tblr-close-color-rgb: 228, 228, 239; --tblr-body-color-rgb: 228, 228, 239; --tblr-emphasis-color: #ffffff; --tblr-tertiary-bg: #3a3a4e; --tblr-secondary-bg-rgb: 42, 42, 62; --tblr-tertiary-bg-rgb: 58, 58, 78; --tblr-bg-surface-tertiary: #3a3a4e; background-color: var(--tblr-body-bg); color: var(--tblr-body-color); } /* 卡片暗色 */ body.dark .card { background-color: var(--tblr-card-bg); border-color: var(--tblr-border-color); color: var(--tblr-body-color); } body.dark .card-header { border-bottom-color: var(--tblr-border-color); background-color: var(--tblr-card-cap-bg); color: var(--tblr-body-color); } body.dark .card-footer { border-top-color: var(--tblr-border-color); background-color: var(--tblr-card-cap-bg); } /* 表格暗色 */ body.dark .table { --tblr-table-color: var(--tblr-body-color); color: var(--tblr-body-color); background-color: transparent; } body.dark .table > :not(caption) > * > * { background-color: transparent; border-bottom-color: var(--tblr-border-color); color: var(--tblr-body-color); } body.dark .table-striped > tbody > tr:nth-of-type(odd) > * { --tblr-table-accent-bg: rgba(255, 255, 255, 0.02); } body.dark .table-hover > tbody > tr:hover > * { --tblr-table-accent-bg: rgba(255, 255, 255, 0.05); } body.dark .table thead th { border-bottom-color: var(--tblr-border-color); color: var(--tblr-body-color); background-color: rgba(255, 255, 255, 0.03); } /* 表单控件暗色 */ body.dark .form-control, body.dark .form-select, body.dark .form-control:focus, body.dark .form-select:focus { background-color: var(--tblr-input-bg); border-color: var(--tblr-input-border-color); color: var(--tblr-input-color); } body.dark .form-control::placeholder { color: var(--tblr-input-placeholder-color); } body.dark .form-control:disabled, body.dark .form-control[readonly] { background-color: var(--tblr-input-disabled-bg); color: var(--tblr-input-color); } body.dark .form-check-input { background-color: var(--tblr-form-check-input-bg); border-color: var(--tblr-form-check-border-color); } body.dark .input-group-text { background-color: var(--tblr-tertiary-bg); border-color: var(--tblr-border-color); color: var(--tblr-body-color); } /* 下拉菜单暗色 */ body.dark .dropdown-menu { background-color: var(--tblr-dropdown-bg); border-color: var(--tblr-dropdown-border-color); color: var(--tblr-dropdown-color); } body.dark .dropdown-item { color: var(--tblr-dropdown-color); } body.dark .dropdown-item:hover, body.dark .dropdown-item:focus { background-color: var(--tblr-dropdown-hover-bg); color: var(--tblr-dropdown-color); } body.dark .dropdown-item.active, body.dark .dropdown-item:active { background-color: var(--tblr-dropdown-active-bg); color: #fff; } body.dark .dropdown-divider { border-top-color: var(--tblr-dropdown-divider-bg); } /* 导航栏暗色 */ body.dark .navbar { background-color: var(--tblr-navbar-bg) !important; color: var(--tblr-navbar-color); border-bottom: 1px solid var(--tblr-border-color); } body.dark .navbar .nav-link, body.dark .navbar .navbar-nav .nav-link { color: var(--tblr-nav-link-color); } body.dark .navbar .nav-link:hover, body.dark .navbar .navbar-nav .nav-link:hover, body.dark .navbar .nav-link.active, body.dark .navbar .navbar-nav .nav-link.active { color: var(--tblr-nav-link-hover-color); } body.dark .navbar-brand-autodark { color: var(--tblr-navbar-color); } body.dark .navbar-toggler { color: var(--tblr-navbar-color); border-color: var(--tblr-border-color); } body.dark .navbar-toggler-icon { filter: invert(1); } /* 头像暗色 */ body.dark .avatar { background-color: #4a4a5e; color: #ffffff; border-color: var(--tblr-border-color); } /* 模态框暗色 */ body.dark .modal-content { background-color: var(--tblr-modal-bg); border-color: var(--tblr-border-color); color: var(--tblr-body-color); } body.dark .modal-header { border-bottom-color: var(--tblr-modal-header-border-color); } body.dark .modal-footer { border-top-color: var(--tblr-modal-footer-border-color); } body.dark .btn-close { filter: invert(1) grayscale(100%) brightness(200%); } /* Toast 暗色 */ body.dark .toast { background-color: var(--tblr-bg-surface-secondary); color: var(--tblr-body-color); border-color: var(--tblr-border-color); } /* 分页暗色 */ body.dark .page-link { background-color: var(--tblr-pagination-bg); border-color: var(--tblr-pagination-border-color); color: var(--tblr-pagination-color); } body.dark .page-link:hover { background-color: var(--tblr-pagination-hover-bg); color: var(--tblr-pagination-color); border-color: var(--tblr-pagination-border-color); } body.dark .page-item.disabled .page-link { background-color: var(--tblr-pagination-bg); color: var(--tblr-pagination-disabled-color); } body.dark .page-item.active .page-link { background-color: var(--tblr-primary); border-color: var(--tblr-primary); color: #fff; } /* 徽章暗色 */ body.dark .badge { background-color: var(--tblr-badge-bg); color: var(--tblr-badge-color); } /* Alert 列表组暗色 */ body.dark .list-group-item { background-color: var(--tblr-list-group-bg); border-color: var(--tblr-list-group-border-color); color: var(--tblr-list-group-color); } body.dark .list-group-item:hover { background-color: var(--tblr-list-group-hover-bg); } body.dark .list-group-item.active { background-color: var(--tblr-primary); border-color: var(--tblr-primary); } /* 代码/预格式化暗色 */ body.dark code { color: var(--tblr-code-color); } body.dark pre { color: var(--tblr-pre-color); background-color: var(--tblr-highlight-bg); } /* Alert 暗色 */ body.dark .alert-info { background-color: var(--tblr-alert-info-bg); border-color: var(--tblr-alert-info-border-color); color: var(--tblr-alert-info-color); } body.dark .alert-success { background-color: var(--tblr-alert-success-bg); border-color: var(--tblr-alert-success-border-color); color: var(--tblr-alert-success-color); } body.dark .alert-warning { background-color: var(--tblr-alert-warning-bg); border-color: var(--tblr-alert-warning-border-color); color: var(--tblr-alert-warning-color); } body.dark .alert-danger { background-color: var(--tblr-alert-danger-bg); border-color: var(--tblr-alert-danger-border-color); color: var(--tblr-alert-danger-color); } /* 进度条暗色 */ body.dark .progress { background-color: var(--tblr-progress-bg); } /* Tooltip / Popover 暗色 */ body.dark .tooltip .tooltip-inner { background-color: var(--tblr-tooltip-bg); } body.dark .popover { background-color: var(--tblr-popover-bg); border-color: var(--tblr-popover-border-color); } body.dark .popover-header { background-color: var(--tblr-popover-header-bg); color: var(--tblr-popover-header-color); border-bottom-color: var(--tblr-popover-border-color); } body.dark .popover-body { color: var(--tblr-popover-body-color); } /* 文本/链接暗色 */ body.dark a { color: #7c3aed; } body.dark a:hover { color: #8b5cf6; } body.dark .text-muted, body.dark .text-secondary, body.dark .text-body-secondary { color: #9ca3af !important; } body.dark .text-body { color: var(--tblr-body-color) !important; } body.dark hr { border-top-color: var(--tblr-border-color); opacity: 1; } /* 边框暗色 */ body.dark .border, body.dark .border-top, body.dark .border-bottom, body.dark .border-start, body.dark .border-end { border-color: var(--tblr-border-color) !important; } /* 背景色覆盖 */ body.dark .bg-white, body.dark .bg-light { background-color: var(--tblr-card-bg) !important; } body.dark .bg-body-tertiary, body.dark .bg-secondary-subtle { background-color: var(--tblr-tertiary-bg) !important; } /* bootstrap-table 暗色适配 */ body.dark .fixed-table-container { background-color: var(--tblr-card-bg); } body.dark .bootstrap-table .table { color: var(--tblr-body-color); } body.dark .fixed-table-pagination { color: var(--tblr-body-color); } body.dark .fixed-table-toolbar { color: var(--tblr-body-color); } body.dark .bs-bars, body.dark .fixed-table-toolbar .columns label { color: var(--tblr-body-color); } /* bootstrap-datepicker 暗色适配 */ body.dark .datepicker { background-color: var(--tblr-dropdown-bg); border-color: var(--tblr-dropdown-border-color); color: var(--tblr-body-color); } body.dark .datepicker td, body.dark .datepicker th { color: var(--tblr-body-color); } body.dark .datepicker td.day:hover { background-color: var(--tblr-dropdown-hover-bg); } body.dark .datepicker td.active, body.dark .datepicker td.active:hover { background-color: var(--tblr-primary); color: #fff; } body.dark .datepicker .datepicker-switch:hover { color: var(--tblr-body-color); } body.dark .datepicker .disabled { color: #6b7280 !important; } /* 响应式卡片表格暗色 */ @media (max-width: 767.98px) { body.dark .table-card-view tr { border-color: var(--tblr-border-color); background: var(--tblr-card-bg); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); } body.dark .table-card-view td { border-bottom-color: var(--tblr-border-color); } body.dark .table-card-view td::before { color: #9ca3af; } } /* 主题切换按钮样式 */ .theme-toggle-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: none; background: transparent; color: inherit; cursor: pointer; border-radius: 50%; transition: background-color 0.2s ease; vertical-align: middle; } .theme-toggle-btn:hover { background-color: rgba(255, 255, 255, 0.1); } .theme-toggle-btn:focus { outline: none; background-color: rgba(255, 255, 255, 0.15); } .theme-toggle-btn i { font-size: 1.1rem; line-height: 1; } body.dark .theme-toggle-btn:hover { background-color: rgba(255, 255, 255, 0.1); } /* 暗色模式下的 navbar 中的切换按钮悬停颜色 */ body.dark .navbar .theme-toggle-btn { color: var(--tblr-navbar-color); }