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; align-items: center;
} }
.card-header span {
color: var(--header-text);
font-size: 18px;
font-weight: 600;
}
.client-id { .client-id {
font-size: 12px; font-size: 12px;
color: #409eff; color: var(--sidebar-active-bg);
cursor: pointer; cursor: pointer;
} }
@ -317,7 +323,7 @@ onMounted(() => {
.form-tip { .form-tip {
font-size: 12px; font-size: 12px;
color: #909399; color: var(--footer-text);
margin-top: 4px; margin-top: 4px;
} }
@ -328,15 +334,18 @@ onMounted(() => {
.secret-display p { .secret-display p {
margin: 16px 0 8px; margin: 16px 0 8px;
font-size: 14px; font-size: 14px;
color: var(--header-text);
} }
.secret-value { .secret-value {
display: block; display: block;
padding: 12px; padding: 12px;
background-color: #f5f7fa; background-color: var(--header-bg);
border: 1px solid var(--header-border);
border-radius: 4px; border-radius: 4px;
word-break: break-all; word-break: break-all;
font-size: 13px; font-size: 13px;
color: var(--header-text);
} }
.copy-btn { .copy-btn {
@ -344,6 +353,37 @@ onMounted(() => {
width: 100%; 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) { @media (max-width: 900px) {
.card-header { .card-header {
flex-direction: column; flex-direction: column;

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

@ -286,16 +286,53 @@ onMounted(() => {
align-items: center; align-items: center;
} }
.card-header span {
color: var(--header-text);
font-size: 18px;
font-weight: 600;
}
.filter-form { .filter-form {
margin-bottom: 20px; margin-bottom: 20px;
} }
.form-tip { .form-tip {
font-size: 12px; font-size: 12px;
color: #909399; color: var(--footer-text);
margin-top: 4px; 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) { @media (max-width: 900px) {
.card-header { .card-header {
flex-direction: column; flex-direction: column;