laobinghu/SportMeetingAdminSys
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: dark mode adaptation for admin pages

Browse Source 
Add dark mode CSS variables to oauth and users admin pages for form labels, tables, and cards
This commit is contained in:
烧瑚烙饼 2026-03-22 16:04:19 +08:00
parent 30f2115877
commit 286862d1a0
2 changed files with 81 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
app/pages/admin/oauth.vue
View File

@ -304,9 +304,15 @@ onMounted(() => {
align-items: center;
}
.card-header span {
color: var(--header-text);
font-size: 18px;
font-weight: 600;
}
.client-id {
font-size: 12px;
color: #409eff;
color: var(--sidebar-active-bg);
cursor: pointer;
}
@ -317,7 +323,7 @@ onMounted(() => {
.form-tip {
font-size: 12px;
color: #909399;
color: var(--footer-text);
margin-top: 4px;
}
@ -328,15 +334,18 @@ onMounted(() => {
.secret-display p {
margin: 16px 0 8px;
font-size: 14px;
color: var(--header-text);
}
.secret-value {
display: block;
padding: 12px;
background-color: #f5f7fa;
background-color: var(--header-bg);
border: 1px solid var(--header-border);
border-radius: 4px;
word-break: break-all;
font-size: 13px;
color: var(--header-text);
}
.copy-btn {
@ -344,6 +353,37 @@ onMounted(() => {
width: 100%;
}
/* 确保表格在暗色模式下文字清晰 */
:deep(.el-card) {
background-color: var(--header-bg);
color: var(--header-text);
}
:deep(.el-card .el-card__header) {
border-bottom-color: var(--header-border);
}
:deep(.el-form-item__label) {
color: var(--header-text) !important;
}
:deep(.el-table) {
color: var(--header-text);
}
:deep(.el-table th) {
background-color: var(--header-bg);
color: var(--header-text);
}
:deep(.el-table tr) {
background-color: var(--header-bg);
}
:deep(.el-table td) {
color: var(--header-text);
}
@media (max-width: 900px) {
.card-header {
flex-direction: column;

39
app/pages/admin/users.vue
View File

@ -286,16 +286,53 @@ onMounted(() => {
align-items: center;
}
.card-header span {
color: var(--header-text);
font-size: 18px;
font-weight: 600;
}
.filter-form {
margin-bottom: 20px;
}
.form-tip {
font-size: 12px;
color: #909399;
color: var(--footer-text);
margin-top: 4px;
}
/* 确保表格和表单在暗色模式下文字清晰 */
:deep(.el-card) {
background-color: var(--header-bg);
color: var(--header-text);
}
:deep(.el-card .el-card__header) {
border-bottom-color: var(--header-border);
}
:deep(.el-form-item__label) {
color: var(--header-text) !important;
}
:deep(.el-table) {
color: var(--header-text);
}
:deep(.el-table th) {
background-color: var(--header-bg);
color: var(--header-text);
}
:deep(.el-table tr) {
background-color: var(--header-bg);
}
:deep(.el-table td) {
color: var(--header-text);
}
@media (max-width: 900px) {
.card-header {
flex-direction: column;