/** * Jumping Theme — Xboard / NaiveUI 全局深浅色适配 * 策略：:root 定义深色变量（默认），html.light 覆盖为浅色变量。 * 所有元素规则统一使用 var(--jp-*) 变量，一次定义，两色自动切换。 * theme-sync.js 负责把 html.dark / html.light class 同步到 。 */ /* ============================================================ 1. CSS 变量 — 深色（默认） ============================================================ */ :root { --jp-primary: #007aff; --jp-accent: #5e5ce6; --jp-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* 背景层级 */ --jp-bg: #000000; --jp-bg2: #1c1c1e; --jp-card: #1c1c1e; /* 不透明，避免透明叠加后颜色偏移 */ /* 文字 */ --jp-text: #ffffff; --jp-muted: #86868b; /* 边框 / 分隔 */ --jp-border: rgba(255, 255, 255, 0.07); /* 交互状态 */ --jp-hover: rgba(255, 255, 255, 0.08); --jp-sel-bg: rgba(0, 122, 255, 0.20); /* 输入框 */ --jp-input-bg: #2c2c2e; --jp-input-bdr: rgba(255, 255, 255, 0.12); /* 表格表头 */ --jp-th-bg: #2c2c2e; /* 阴影 */ --jp-shadow: 0 4px 24px rgba(0, 0, 0, 0.40); /* 滚动条 */ --jp-scrollbar: rgba(255, 255, 255, 0.18); } /* ============================================================ 2. CSS 变量 — 浅色覆盖 theme-sync.js 会把 html.light 加到 ； html[data-theme="light"] / html:has([data-theme="light"]) 兜底 ============================================================ */ html.light, html[data-theme="light"], html:has([data-theme="light"]) { --jp-bg: #f5f5f7; --jp-bg2: #e8e8ed; --jp-card: #ffffff; --jp-text: #1d1d1f; --jp-muted: #6e6e73; --jp-border: rgba(0, 0, 0, 0.08); --jp-hover: rgba(0, 0, 0, 0.05); --jp-sel-bg: rgba(0, 122, 255, 0.12); --jp-input-bg: #ffffff; --jp-input-bdr: rgba(0, 0, 0, 0.12); --jp-th-bg: #f0f0f5; --jp-shadow: 0 4px 24px rgba(0, 0, 0, 0.08); --jp-scrollbar: rgba(0, 0, 0, 0.18); } /* ============================================================ 3. 基础：html / body ============================================================ */ html, body { background-color: var(--jp-bg) !important; color: var(--jp-text) !important; font-family: var(--jp-font) !important; } * { font-family: var(--jp-font); } /* ============================================================ 4. NaiveUI 主布局 — 覆盖所有容器层级 NaiveUI 布局结构（每层都要覆盖，否则 #18181c 会透出）： .n-layout ├─ .n-layout-sider └─ .n-layout ├─ .n-layout-header └─ .n-scrollbar └─ .n-scrollbar-container └─ .n-scrollbar-content └─ .n-layout-content ============================================================ */ /* 主内容链路：全部黑色背景 */ .n-layout, .n-scrollbar, .n-scrollbar-container, .n-scrollbar-content, .n-layout-content, .n-layout-content > div, .n-layout-content > section { background: var(--jp-bg) !important; color: var(--jp-text) !important; } /* 侧边栏本体 + 侧边栏内的滚动容器（菜单滚动区）用卡片色 */ .n-layout-sider, [class*="n-layout-sider"], .n-layout-sider .n-scrollbar, .n-layout-sider .n-scrollbar-container, .n-layout-sider .n-scrollbar-content { background: var(--jp-card) !important; box-shadow: none !important; } .n-layout-sider { border-right: 1px solid var(--jp-border) !important; } /* 顶栏 */ .n-layout-header, [class*="n-layout-header"] { background: var(--jp-card) !important; border-bottom: 1px solid var(--jp-border) !important; color: var(--jp-text) !important; box-shadow: none !important; } /* ============================================================ 5. 卡片 ============================================================ */ .n-card, [class*="n-card"]:not(.n-menu-item):not(.n-menu-item-content) { background: var(--jp-card) !important; color: var(--jp-text) !important; border: none !important; border-radius: 16px !important; box-shadow: none !important; } .n-card__header, .n-card__content, .n-card__footer, .n-card__header-extra { color: var(--jp-text) !important; background: transparent !important; } .n-card__header { border-bottom: 1px solid var(--jp-border) !important; } /* ============================================================ 6. 菜单（侧边栏） ============================================================ */ .n-menu { background: transparent !important; border: none !important; } .n-menu-item, .n-menu-item-content, .n-menu-item-content-wrapper, .n-menu [class*="menu-item"] { color: var(--jp-text) !important; background: transparent !important; border: none !important; border-radius: 8px !important; box-shadow: none !important; } /* 菜单内所有子元素：彻底清除嵌套框 */ .n-menu-item *, .n-menu-item-content *, .n-layout-sider .n-menu-item *, .n-layout-sider .n-menu-item-content * { background: transparent !important; background-color: transparent !important; background-image: none !important; border: none !important; box-shadow: none !important; border-radius: 0 !important; } .n-menu-item-content:hover, .n-menu-item:hover { background: var(--jp-hover) !important; } .n-menu-item--selected .n-menu-item-content { background: var(--jp-sel-bg) !important; color: var(--jp-primary) !important; border-left: 3px solid var(--jp-primary) !important; } .n-menu-item--selected .n-menu-item-content, .n-menu-item--selected .n-menu-item-content * { color: var(--jp-primary) !important; } /* ============================================================ 7. 输入框 ============================================================ */ .n-input { background: var(--jp-input-bg) !important; border: 1px solid var(--jp-input-bdr) !important; border-radius: 12px !important; color: var(--jp-text) !important; box-shadow: none !important; } .n-input:focus-within { border-color: var(--jp-primary) !important; box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.15) !important; } /* 内层 input / textarea 不加自己的边框 */ .n-input__input-el, .n-input__textarea-el, input.n-input__input-el, .n-input input { background: transparent !important; color: var(--jp-text) !important; border: none !important; box-shadow: none !important; outline: none !important; } .n-input__input-el::placeholder, .n-input__textarea-el::placeholder, input::placeholder { color: var(--jp-muted) !important; opacity: 1; } /* ============================================================ 8. 按钮 ============================================================ */ .n-button--default-type { background: var(--jp-card) !important; color: var(--jp-text) !important; border-color: var(--jp-border) !important; } .n-button--primary-type, button[type="submit"].n-button { background: var(--jp-primary) !important; border-color: var(--jp-primary) !important; border-radius: 12px !important; font-weight: 600 !important; color: #fff !important; } .n-button--primary-type:hover { background: #0062cc !important; border-color: #0062cc !important; } a, .n-button--text-type { color: var(--jp-primary) !important; } a:hover { color: #0062cc !important; } /* ============================================================ 9. 表格 ============================================================ */ .n-data-table, .n-data-table-wrapper { background: var(--jp-card) !important; border-color: var(--jp-border) !important; border: none !important; } .n-data-table-th { background: var(--jp-th-bg) !important; color: var(--jp-text) !important; border-color: var(--jp-border) !important; border: none !important; box-shadow: none !important; } .n-data-table-td { color: var(--jp-text) !important; border-color: var(--jp-border) !important; border: none !important; border-bottom: 1px solid var(--jp-border) !important; } .n-data-table-tr:hover .n-data-table-td { background: var(--jp-hover) !important; } /* ============================================================ 10. 下拉菜单 / Select（portal 渲染，在 body 直接子节点下） ============================================================ */ .n-dropdown, .n-dropdown-menu, .n-base-select-menu, .n-select-menu, .v-binder-follower-content .n-dropdown, .v-binder-follower-content .n-base-select-menu { background: var(--jp-card) !important; border: 1px solid var(--jp-border) !important; box-shadow: var(--jp-shadow) !important; color: var(--jp-text) !important; } .n-dropdown-option-body, .n-base-select-option { color: var(--jp-text) !important; } .n-dropdown-option-body--pending, .n-base-select-option--pending { background: var(--jp-hover) !important; } .n-dropdown-option__label, .n-base-select-option__content { color: var(--jp-text) !important; } /* ============================================================ 11. Modal ============================================================ */ .n-modal, .n-card.n-modal { background: var(--jp-card) !important; color: var(--jp-text) !important; border: 1px solid var(--jp-border) !important; border-radius: 20px !important; box-shadow: var(--jp-shadow) !important; } .n-modal-mask { background: rgba(0, 0, 0, 0.65) !important; } /* ============================================================ 12. 表单 ============================================================ */ .n-form, .n-form-item, .n-form-item-content { border: none !important; box-shadow: none !important; } .n-form-item-label, .n-form-item-label__text, .n-form label { color: var(--jp-text) !important; } .n-form-item-blank__feedback, .n-form-item-feedback { color: var(--jp-muted) !important; } /* 开关旁边的标签文字 */ .n-switch + span, .n-switch + label, .n-form-item .n-switch ~ * { color: var(--jp-text) !important; } /* ============================================================ 13. Tabs ============================================================ */ .n-tabs { color: var(--jp-text) !important; } .n-tabs-nav { background: transparent !important; border-color: var(--jp-border) !important; } .n-tabs-tab { color: var(--jp-muted) !important; } .n-tabs-tab--active, .n-tabs-tab--active .n-tabs-tab__label { color: var(--jp-primary) !important; } .n-tabs-bar { background: var(--jp-primary) !important; } .n-tab-pane { color: var(--jp-text) !important; } /* ============================================================ 14. Tag ============================================================ */ .n-tag { background: var(--jp-bg2) !important; color: var(--jp-text) !important; border-color: var(--jp-border) !important; } /* ============================================================ 15. 描述列表 ============================================================ */ .n-descriptions-table-content, .n-descriptions-table-header, .n-descriptions-table-th, .n-descriptions-table-td { background: transparent !important; color: var(--jp-text) !important; border-color: var(--jp-border) !important; } /* ============================================================ 16. 统计 / 进度条 ============================================================ */ .n-statistic-value__content { color: var(--jp-text) !important; } .n-statistic-label { color: var(--jp-muted) !important; } .n-progress-graph-line-rail { background: var(--jp-bg2) !important; } /* ============================================================ 17. Popover / Tooltip（portal 渲染） ============================================================ */ .n-popover, .n-tooltip { background: var(--jp-card) !important; color: var(--jp-text) !important; border: 1px solid var(--jp-border) !important; box-shadow: var(--jp-shadow) !important; } .n-popover-arrow-wrapper .n-popover-arrow { background: var(--jp-card) !important; } /* ============================================================ 18. 空状态 ============================================================ */ .n-empty__description, .n-empty__icon { color: var(--jp-muted) !important; } /* ============================================================ 19. 分割线 ============================================================ */ .n-divider { border-color: var(--jp-border) !important; } .n-divider--title-position-center .n-divider__title { color: var(--jp-muted) !important; } /* ============================================================ 20. 分页 ============================================================ */ .n-pagination-item { background: var(--jp-card) !important; color: var(--jp-text) !important; border-color: var(--jp-border) !important; } .n-pagination-item--active { background: var(--jp-primary) !important; color: #fff !important; border-color: var(--jp-primary) !important; } .n-pagination-item:hover:not(.n-pagination-item--active) { background: var(--jp-hover) !important; } /* ============================================================ 21. 列表 ============================================================ */ .n-list, .n-list-item { background: transparent !important; color: var(--jp-text) !important; border-color: var(--jp-border) !important; } /* ============================================================ 22. 通知 / 警告 ============================================================ */ .n-notification, .n-alert { background: var(--jp-card) !important; color: var(--jp-text) !important; border-color: var(--jp-border) !important; } /* ============================================================ 23. 滚动条 ============================================================ */ .n-scrollbar-rail__scrollbar { background: var(--jp-scrollbar) !important; } /* ============================================================ 24. 面包屑 ============================================================ */ .n-breadcrumb-item { color: var(--jp-muted) !important; } .n-breadcrumb-item:last-child { color: var(--jp-text) !important; } .n-breadcrumb__separator { color: var(--jp-muted) !important; } /* ============================================================ 25. Collapse（折叠面板） ============================================================ */ .n-collapse, .n-collapse-item, .n-collapse-item__header { background: transparent !important; color: var(--jp-text) !important; border-color: var(--jp-border) !important; } .n-collapse-item__content-inner { color: var(--jp-muted) !important; } /* ============================================================ 26. 全局去除多余边框 / 阴影 ============================================================ */ .n-card, .n-data-table, .n-modal, .n-form, .n-form-item, .n-layout-sider, .n-menu, .n-input, .n-button, .n-switch, .n-descriptions, .n-empty, .n-tabs, .n-collapse { box-shadow: none !important; } /* ============================================================ 27. 主色：品牌 Logo ============================================================ */ .n-layout-sider > .logo, .n-layout-header .logo { font-size: 1.5rem !important; font-weight: 700 !important; color: var(--jp-primary) !important; } /* ============================================================ 28. 仪表盘注入模块（#JDM） ============================================================ */ /* 统计卡片 */ #JDM .jdm-stat { background: var(--jp-card) !important; border: 1px solid var(--jp-border) !important; color: var(--jp-text) !important; } #JDM .jdm-stat-val { color: var(--jp-text) !important; } #JDM .jdm-stat-label, #JDM .jdm-stat-sub { color: var(--jp-muted) !important; } /* 通用卡片 */ #JDM .jdm-card { background: var(--jp-card) !important; border: 1px solid var(--jp-border) !important; color: var(--jp-text) !important; border-radius: 16px !important; } #JDM .jdm-card-title { color: var(--jp-text) !important; border-color: var(--jp-border) !important; } /* 公告 */ #JDM .jdm-notice-date { color: var(--jp-muted) !important; } #JDM .jdm-notice-body { color: var(--jp-text) !important; } /* 订阅按钮 */ #JDM .jdm-sub { background: var(--jp-hover) !important; border-color: var(--jp-border) !important; color: var(--jp-text) !important; } #JDM .jdm-sub:hover { background: var(--jp-sel-bg) !important; border-color: var(--jp-primary) !important; color: var(--jp-primary) !important; } /* 客户端 */ #JDM .jdm-client { border-color: var(--jp-border) !important; } #JDM .jdm-client-name { color: var(--jp-text) !important; } #JDM .jdm-client-ver { color: var(--jp-muted) !important; } /* OS 标签 */ #JDM .jdm-os-tabs { border-color: var(--jp-border) !important; } #JDM .jdm-os-tab { color: var(--jp-muted) !important; } #JDM .jdm-os-tab.active { color: var(--jp-primary) !important; border-bottom-color: var(--jp-primary) !important; } /* 进度条 */ #JDM .jdm-progress-bar { background: var(--jp-hover) !important; } #JDM .jdm-progress-fill { background: var(--jp-primary) !important; } #JDM .jdm-progress-fill.warn { background: #ff453a !important; } /* 空状态 */ #JDM .jdm-empty { color: var(--jp-muted) !important; }