feat(frontend): 实现主题切换功能并优化全局样式
- 在 App.vue 中添加主题切换按钮和逻辑 - 新增 global.css 和 theme.css 文件,统一全局样式和主题样式 - 更新 LoginPage、RegisterPage 和 HomePage 的样式,适配新主题 - 实现暗黑模式下的样式调整
This commit is contained in:
47
biji-qianduan/src/assets/styles/theme.css
Normal file
47
biji-qianduan/src/assets/styles/theme.css
Normal 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);
|
||||
}
|
||||
Reference in New Issue
Block a user