/* ============================================================
* 全站统一主题变量 + 暗色模式
*
* 用法（任意页面）：
*
*
*
* 切换主题（自动注入右下角悬浮按钮 + 暴露 API）：
* window.viviTheme.toggle(); // 在 light / dark 间切换
* window.viviTheme.set('dark'); // 'light' | 'dark' | 'auto'
* window.viviTheme.get(); // 返回当前生效模式 'light' | 'dark'
*
* 监听切换事件：
* window.addEventListener('viviThemeChange', e => console.log(e.detail));
* ============================================================ */
/* ---------- 默认（亮色）变量：与首页 index.html :root 兼容 ---------- */
:root {
--primary: #6366f1;
--primary-light: #eef2ff;
--primary-hover: #4f46e5;
--bg: #f7f8fc;
--sidebar-bg: #ffffff;
--card-bg: #ffffff;
--border: #ececf3;
--text: #1f2330;
--text-2: #6b7280;
--text-3: #9ca3af;
--shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
--shadow-md: 0 4px 14px rgba(15, 23, 42, 0.06);
--shadow-lg: 0 12px 28px rgba(15, 23, 42, 0.08);
/* 兼容 Element Plus 的 token（被 vendor 暗色覆盖时这里给亮色兜底） */
color-scheme: light;
}
/* ---------- 暗色变量：在 时启用 ---------- */
html[data-theme="dark"] {
--primary: #818cf8;
--primary-light: #1e1b3a;
--primary-hover: #a5b4fc;
--bg: #0f1115;
--sidebar-bg: #16181f;
--card-bg: #1b1e26;
--border: #2a2d36;
--text: #e5e7eb;
--text-2: #b0b6c0;
--text-3: #7e8693;
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45);
--shadow-md: 0 4px 14px rgba(0, 0, 0, 0.45);
--shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.55);
color-scheme: dark;
}
/* ---------- 暗色下的常见兜底（覆盖各工具页里硬编码的 #fff/#000） ----------
* 这里只覆盖最常见的"白底/黑字"硬编码，不强行接管所有页面，
* 避免破坏已有暗色主题的页面（如 phprunner 编辑器主题）。
*/
html[data-theme="dark"] body {
background: var(--bg);
color: var(--text);
}
/* Element Plus dark token 启用入口（项目 vendor 已自带 dark 主题文件，
* 这里只确保 类被同步设置即可，theme.js 会处理） */
/* ---------- 主题切换浮动按钮 ---------- */
.vivi-theme-fab {
position: fixed;
right: 18px;
bottom: 84px; /* 让出"回到顶部"按钮位置 */
z-index: 99997;
width: 38px;
height: 38px;
border-radius: 50%;
border: 1px solid var(--border);
background: var(--card-bg);
color: var(--text-2);
font-size: 16px;
line-height: 1;
cursor: pointer;
box-shadow: var(--shadow-md);
display: flex;
align-items: center;
justify-content: center;
transition: transform .15s, color .15s, border-color .15s, background .15s;
user-select: none;
-webkit-user-select: none;
}
.vivi-theme-fab:hover {
transform: translateY(-2px);
color: var(--primary);
border-color: var(--primary);
}
.vivi-theme-fab:active {
transform: scale(0.94);
}
/* 暗色下 element-plus 弹层等少数硬白底场景的兜底 */
html[data-theme="dark"] .el-popper,
html[data-theme="dark"] .el-dropdown-menu,
html[data-theme="dark"] .el-dialog,
html[data-theme="dark"] .el-message,
html[data-theme="dark"] .el-message-box {
background: var(--card-bg) !important;
color: var(--text) !important;
}
html[data-theme="dark"] .el-dropdown-menu__item {
color: var(--text) !important;
}
html[data-theme="dark"] .el-dropdown-menu__item:not(.is-disabled):hover {
background: var(--primary-light) !important;
color: var(--primary-hover) !important;
}