67 lines
1.9 KiB
CSS
67 lines
1.9 KiB
CSS
/* assets/styles/theme.css */
|
|
|
|
/* 默认浅色主题 */
|
|
:root {
|
|
/* 主色调 - 活力紫 */
|
|
--primary-color: #6a11cb;
|
|
--primary-color-light: #f3e5f5; /* 浅紫色，用于悬停 */
|
|
--primary-color-dark: #4a008f; /* 深紫色，用于激活 */
|
|
|
|
/* 辅助色 */
|
|
--secondary-color: #f7fafc;
|
|
--accent-color: #2575fc; /* 亮蓝色，用于强调 */
|
|
--danger-color: #f5365c;
|
|
--success-color: #2dce89;
|
|
--warning-color: #fb6340;
|
|
|
|
/* 背景色 - 带有色彩倾向的渐变 */
|
|
--bg-color: #ffffff;
|
|
--bg-color-secondary: #f8f9fe;
|
|
--bg-gradient: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
|
|
|
|
/* 文本色 */
|
|
--text-color: #32325d; /* 深蓝灰色 */
|
|
--text-color-secondary: #6b7c93; /* 灰蓝色 */
|
|
--text-color-placeholder: #adb5bd;
|
|
|
|
/* 边框和阴影 */
|
|
--border-color: #e9ecef;
|
|
--border-radius: 8px;
|
|
--box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
|
|
--box-shadow-light: 0 2px 4px rgba(50, 50, 93, 0.1);
|
|
--box-shadow-dark: 0 7px 14px rgba(50, 50, 93, 0.1), 0 3px 6px rgba(0, 0, 0, 0.08);
|
|
|
|
/* 过渡 */
|
|
--transition-duration: 0.25s;
|
|
}
|
|
|
|
/* 深色主题 */
|
|
.dark-theme {
|
|
/* 主色调 - 科技蓝 */
|
|
--primary-color: #007bff;
|
|
--primary-color-light: #1f2937;
|
|
--primary-color-dark: #0056b3;
|
|
|
|
/* 辅助色 */
|
|
--secondary-color: #111827;
|
|
--accent-color: #10b981; /* 亮绿色 */
|
|
--danger-color: #ef4444;
|
|
--success-color: #22c55e;
|
|
--warning-color: #f97316;
|
|
|
|
/* 背景色 - 深邃的渐变 */
|
|
--bg-color: #0d1117;
|
|
--bg-color-secondary: #1f2937;
|
|
--bg-gradient: linear-gradient(135deg, #0d1117 0%, #1f2937 100%);
|
|
|
|
/* 文本色 */
|
|
--text-color: #e5e7eb;
|
|
--text-color-secondary: #9ca3af;
|
|
--text-color-placeholder: #4b5563;
|
|
|
|
/* 边框和阴影 */
|
|
--border-color: #374151;
|
|
--box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2), 0 1px 3px rgba(0, 0, 0, 0.15);
|
|
--box-shadow-light: 0 2px 4px rgba(0, 0, 0, 0.18);
|
|
--box-shadow-dark: 0 7px 14px rgba(0, 0, 0, 0.2), 0 3px 6px rgba(0, 0, 0, 0.15);
|
|
} |