feat(frontend): 实现主题切换功能并优化全局样式

- 在 App.vue 中添加主题切换按钮和逻辑
- 新增 global.css 和 theme.css 文件,统一全局样式和主题样式
- 更新 LoginPage、RegisterPage 和 HomePage 的样式,适配新主题
- 实现暗黑模式下的样式调整
This commit is contained in:
2025-07-31 10:38:51 +08:00
parent e0a99235ec
commit b22fc82432
8 changed files with 524 additions and 111 deletions

View File

@@ -0,0 +1,47 @@
/* assets/styles/theme.css */
/* 默认浅色主题 */
:root {
--bg-color: #ffffff;
--bg-color-secondary: #f7f8fa;
--bg-color-tertiary: #eff2f5;
--text-color: #303133;
--text-color-secondary: #606266;
--text-color-placeholder: #a8abb2;
--border-color: #dcdfe6;
--border-color-light: #e4e7ed;
--primary-color: #409eff;
--primary-color-light: #ecf5ff;
--danger-color: #f56c6c;
--success-color: #67c23a;
--warning-color: #e6a23c;
--info-color: #909399;
--box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
--box-shadow-light: 0 2px 4px rgba(0, 0, 0, 0.08);
--box-shadow-dark: 0 4px 16px rgba(0, 0, 0, 0.15);
--transition-duration: 0.3s;
}
/* 深色主题 */
.dark-theme {
--bg-color: #141414;
--bg-color-secondary: #1a1a1a;
--bg-color-tertiary: #222222;
--text-color: #e5e5e5;
--text-color-secondary: #a3a3a3;
--text-color-placeholder: #5c5c5c;
--border-color: #3a3a3a;
--border-color-light: #2a2a2a;
--primary-color: #409eff;
--primary-color-light: #26334f;
--danger-color: #f56c6c;
--success-color: #67c23a;
--warning-color: #e6a23c;
--info-color: #909399;
--box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.3);
--box-shadow-light: 0 2px 4px rgba(0, 0, 0, 0.25);
--box-shadow-dark: 0 4px 16px rgba(0, 0, 0, 0.4);
}