/** * yxljl.top 全局配色主题 * 主色：深紫 #5d3f8a / 中紫 #8a5fae / 浅紫 #f3ebf8 * 使用方式：在每个页面内引入 * 深色切换：给或加 data-theme="dark"，或跟随系统 prefers-color-scheme */ /* ===== 浅色主题（默认） ===== */ :root { /* 主色梯度 */ --primary: #8a5fae; --primary-dark: #5d3f8a; --primary-soft: #f3ebf8; --primary-ghost: rgba(138, 95, 174, 0.08); /* 背景与表面 */ --bg: #faf6f0; --card: #ffffff; --overlay: rgba(0, 0, 0, 0.45); /* 边框与分割线 */ --border: #e6e0ee; --border-light: #f0ecf7; --border-strong: #d8cfe6; /* 文字 */ --text: #4a4453; --text-heading: #3a3247; --muted: #999999; --link: #2f8fd0; /* 状态色 */ --danger: #c0392b; --danger-soft: #fdecea; --success: #1e8e5a; --success-soft: #eafaf0; --warning: #e07856; --warning-soft: #fff3e6; --info: #2f8fd0; --info-soft: #eaf5fb; /* 阴影 */ --shadow-sm: 0 2px 8px rgba(93, 63, 138, 0.06); --shadow: 0 4px 16px rgba(93, 63, 138, 0.10); --shadow-lg: 0 8px 30px rgba(93, 63, 138, 0.14); /* 圆角（统一手感） */ --radius-sm: 6px; --radius: 12px; --radius-lg: 18px; /* 过渡 */ --transition-fast: 0.15s ease; --transition: 0.25s ease; } /* ===== 深色主题（显式切换） ===== */ [data-theme="dark"] { --primary: #b98fd9; --primary-dark: #8a5fae; --primary-soft: rgba(185, 143, 217, 0.14); --primary-ghost: rgba(185, 143, 217, 0.10); --bg: #1a1620; --card: #241e2e; --overlay: rgba(0, 0, 0, 0.60); --border: #3a3247; --border-light: #2d2638; --border-strong: #4d4460; --text: #e8e3f0; --text-heading: #f2eef8; --muted: #9a93a5; --link: #6bb3f0; --danger: #e74c3c; --danger-soft: rgba(231, 76, 60, 0.15); --success: #2e9e6b; --success-soft: rgba(46, 158, 107, 0.15); --warning: #e8915f; --warning-soft: rgba(232, 145, 95, 0.15); --info: #4aa8e0; --info-soft: rgba(74, 168, 224, 0.15); --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.30); --shadow: 0 4px 16px rgba(0, 0, 0, 0.40); --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.50); } /* ===== 跟随系统偏好 ===== */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --primary: #b98fd9; --primary-dark: #8a5fae; --primary-soft: rgba(185, 143, 217, 0.14); --primary-ghost: rgba(185, 143, 217, 0.10); --bg: #1a1620; --card: #241e2e; --overlay: rgba(0, 0, 0, 0.60); --border: #3a3247; --border-light: #2d2638; --border-strong: #4d4460; --text: #e8e3f0; --text-heading: #f2eef8; --muted: #9a93a5; --link: #6bb3f0; --danger: #e74c3c; --danger-soft: rgba(231, 76, 60, 0.15); --success: #2e9e6b; --success-soft: rgba(46, 158, 107, 0.15); --warning: #e8915f; --warning-soft: rgba(232, 145, 95, 0.15); --info: #4aa8e0; --info-soft: rgba(74, 168, 224, 0.15); --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.30); --shadow: 0 4px 16px rgba(0, 0, 0, 0.40); --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.50); } } /* ===== 基础重置（只改颜色与过渡，不动布局） ===== */ *, *::before, *::after { transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast); } body { background-color: var(--bg); color: var(--text); } h1, h2, h3, h4, h5, h6 { color: var(--text-heading); } a { color: var(--link); } a:hover { color: var(--primary-dark); } /* ===== 通用组件类 ===== */ .bg-primary { background-color: var(--primary) !important; } .bg-primary-dark { background-color: var(--primary-dark) !important; } .bg-primary-soft { background-color: var(--primary-soft) !important; } .bg-card { background-color: var(--card) !important; } .bg-bg { background-color: var(--bg) !important; } .text-primary { color: var(--primary) !important; } .text-primary-dark { color: var(--primary-dark) !important; } .text-muted { color: var(--muted) !important; } .text-text { color: var(--text) !important; } .border-theme { border-color: var(--border) !important; } .border-theme-light { border-color: var(--border-light) !important; } .border-theme-strong { border-color: var(--border-strong) !important; } /* 主按钮 */ .btn-primary, button[type="submit"], input[type="submit"] { background-color: var(--primary); border-color: var(--primary); color: #fff; } .btn-primary:hover, button[type="submit"]:hover, input[type="submit"]:hover { background-color: var(--primary-dark); border-color: var(--primary-dark); } /* 次要按钮 */ .btn-outline-primary { background-color: transparent; border: 1px solid var(--primary); color: var(--primary); } .btn-outline-primary:hover { background-color: var(--primary-soft); color: var(--primary-dark); } /* 卡片 */ .card, .panel, .box { background-color: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); } /* 输入框 */ input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="search"], textarea, select { background-color: var(--card); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-sm); } input:focus, textarea:focus, select:focus { border-color: var(--primary); outline: none; box-shadow: 0 0 0 3px var(--primary-ghost); } /* 标签/徽章 */ .badge-success, .tag-success { background-color: var(--success-soft); color: var(--success); } .badge-danger, .tag-danger { background-color: var(--danger-soft); color: var(--danger); } .badge-warning, .tag-warning { background-color: var(--warning-soft); color: var(--warning); } .badge-info, .tag-info { background-color: var(--info-soft); color: var(--info); } .badge-primary, .tag-primary { background-color: var(--primary-soft); color: var(--primary-dark); } /* 表格/列表 */ table th, table td { border-color: var(--border); } tbody tr:nth-child(even) { background-color: var(--primary-ghost); } /* 导航栏兜底 */ header, .navbar, .header, .top-bar { background-color: var(--primary-dark); color: #fff; } header a, .navbar a, .header a, .top-bar a { color: rgba(255,255,255,0.9); } header a:hover, .navbar a:hover, .header a:hover, .top-bar a:hover { color: #fff; } /* 弹窗/模态框 */ .modal, .popup, .dialog { background-color: var(--card); border: 1px solid var(--border); box-shadow: var(--shadow-lg); } .modal-backdrop, .overlay { background-color: var(--overlay); } /* 代码/引用 */ code, pre { background-color: var(--border-light); color: var(--text); } /* 深色下图片别太刺眼 */ [data-theme="dark"] img, @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) img { opacity: 0.96; } } /* 滚动条 */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: var(--bg); } ::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--primary); }