/* KaKa API · 全局主题
用法: 在 上设置 data-theme="dark"|"light"
selector 选择 html[data-theme] 而不是 :root, 这样能赢过各页 :root 里写的默认 dark 变量
此文件不写死颜色,只覆盖变量;具体配色留各页内联 :root 默认值为 dark 基准.
*/
:root,
:root[data-theme="dark"] {
color-scheme: dark;
}
:root[data-theme="light"] {
color-scheme: light;
/* 背景层 */
--bg-0: #f4f6fa; /* 页面底色 */
--bg-1: #ffffff; /* 侧栏/顶栏/卡片 */
--bg-2: #ffffff; /* 二级卡片 */
--bg-3: #eef1f6; /* 输入框/hover */
--bg-overlay: rgba(20, 30, 60, .35);
/* 文本 */
--txt: #1a2230;
--txt-dim: #5a6373;
--txt-mute: #8a93a3;
--txt-inv: #ffffff;
/* 边框/分割线 */
--line: #e3e8ef;
--line-2: #c9d1dc;
/* 品牌色 */
--brand: #3563e9;
--brand-2: #7142ef;
--brand-soft: rgba(53, 99, 233, .08);
--brand-bg: rgba(53, 99, 233, .08);
/* 状态色 */
--green: #16a34a;
--red: #ef4444;
--cyan: #0284c7;
--yellow: #d97706;
/* 阴影 */
--shadow: 0 2px 6px rgba(20, 30, 60, .06);
--shadow-lg: 0 8px 24px rgba(20, 30, 60, .08);
/* index.html 用的别名变量 — 同步覆盖 */
--bg-side: #ffffff;
--bg-side-hover: #eef1f6;
--bg-side-active: rgba(53, 99, 233, .10);
}
/* 强制保险:浅色主题下,dashboard / index 的侧栏 & 顶栏必须用浅色
不依赖变量名差异,直接 class 强制,避免个别页面用私有变量名漏掉 */
:root[data-theme="light"] .sidebar {
background: #ffffff !important;
border-right-color: #e3e8ef !important;
}
:root[data-theme="light"] .topbar {
background: #ffffff !important;
border-bottom-color: #e3e8ef !important;
}
/* sidebar 内文本颜色:浅色背景下要深 */
:root[data-theme="light"] .sidebar,
:root[data-theme="light"] .sidebar .menu-item,
:root[data-theme="light"] .sidebar .brand,
:root[data-theme="light"] .sidebar .activity-mode,
:root[data-theme="light"] .sidebar .collapse-btn {
color: #1a2230;
}
:root[data-theme="light"] .sidebar .menu-item:hover,
:root[data-theme="light"] .sidebar .activity-mode:hover,
:root[data-theme="light"] .sidebar .collapse-btn:hover {
background: #eef1f6 !important;
color: #1a2230 !important;
}
:root[data-theme="light"] .sidebar .menu-item.active {
background: rgba(53, 99, 233, .10) !important;
color: #3563e9 !important;
}
/* 顶栏图标按钮 - 浅色下保持清晰 */
:root[data-theme="light"] .tb-icon { color: #5a6373; }
:root[data-theme="light"] .tb-icon:hover { background: #eef1f6; color: #1a2230; }
:root[data-theme="light"] .tb-link { color: #5a6373; }
:root[data-theme="light"] .tb-link:hover { background: #eef1f6; color: #1a2230; }
:root[data-theme="light"] .tb-lang { color: #5a6373; }
:root[data-theme="light"] .tb-lang:hover { background: #eef1f6; color: #1a2230; }
:root[data-theme="light"] .tb-icon .dot { box-shadow: 0 0 0 2px #ffffff; }
/* 浅色下让切换按钮和图标按钮的背景稍微暗淡, hover 起反应 */
:root[data-theme="light"] .tb-icon:hover,
:root[data-theme="light"] .tb-link:hover,
:root[data-theme="light"] .menu-item:hover {
background: #eef1f6;
}
/* 浅色下页面总底色 */
:root[data-theme="light"] body.themeable {
background: var(--bg-0);
color: var(--txt);
}
/* 浅色下的阴影悬浮效果更克制 */
:root[data-theme="light"] .stat:hover,
:root[data-theme="light"] .platform:hover,
:root[data-theme="light"] .key-card:hover {
box-shadow: var(--shadow);
border-color: var(--line-2);
}
/* 浅色主题下,首页的"卡片渐变 + 图标"区块更柔和 */
:root[data-theme="light"] .stat .ic,
:root[data-theme="light"] .platform .head .amt {
/* 保持品牌色不变,仅让图标块的内底色更柔 */
filter: saturate(.95);
}
/* === API 密钥页 (page-keys) 浅色覆盖 === */
:root[data-theme="light"] .keys-search input,
:root[data-theme="light"] .keys-sel,
:root[data-theme="light"] .btn-ghost,
:root[data-theme="light"] .icon-btn {
background: #ffffff;
border-color: #e3e8ef;
color: #1a2230;
}
:root[data-theme="light"] .btn-ghost:hover,
:root[data-theme="light"] .icon-btn:hover {
background: #eef1f6;
border-color: #c9d1dc;
color: #1a2230;
}
:root[data-theme="light"] .dom-row {
background: #ffffff;
border-color: #e3e8ef;
}
:root[data-theme="light"] .dm-lbl { color: #1a2230; }
:root[data-theme="light"] .dm-url { color: #0284c7; }
:root[data-theme="light"] .dm-star { color: #8a93a3; }
:root[data-theme="light"] .dm-star:hover { background: #eef1f6; color: #3563e9; }
:root[data-theme="light"] .dm-star.on { color: #d97706; }
:root[data-theme="light"] .km-key {
background: #f4f6fa;
border-color: #e3e8ef;
color: #0284c7;
}
:root[data-theme="light"] .km-key .cp { color: #5a6373; }
:root[data-theme="light"] .km-key .cp:hover { background: #e3e8ef; color: #0284c7; }
:root[data-theme="light"] .km-tag { background: rgba(53, 99, 233, .10); color: #3563e9; }
:root[data-theme="light"] .km-grp { border-color: #e3e8ef; color: #5a6373; }
:root[data-theme="light"] .km-grp:hover { border-color: #3563e9; color: #1a2230; }
:root[data-theme="light"] .keys-tbl td.cost .row { color: #5a6373; }
:root[data-theme="light"] .keys-tbl td.cost .row b { color: #1a2230; }
:root[data-theme="light"] .keys-tbl td.usage { color: #1a2230; }
:root[data-theme="light"] .keys-tbl td.expire { color: #5a6373; }
:root[data-theme="light"] .keys-tbl td.name { color: #1a2230; }
:root[data-theme="light"] .switch .trk { background: #c9d1dc; }
:root[data-theme="light"] .row-ops .op { color: #5a6373; }
:root[data-theme="light"] .row-ops .op:hover { background: #f4f6fa; color: #1a2230; }
:root[data-theme="light"] .row-ops .op.danger:hover { background: rgba(239, 68, 68, .10); color: #ef4444; }
:root[data-theme="light"] .pg-btn { background: #ffffff; border-color: #e3e8ef; color: #5a6373; }
:root[data-theme="light"] .pg-btn:hover { background: #eef1f6; color: #1a2230; }
:root[data-theme="light"] .pg-btn.on { background: #3563e9; color: #ffffff; border-color: #3563e9; }
:root[data-theme="light"] .pager .info select {
background: #ffffff; border-color: #e3e8ef; color: #1a2230;
}