113 lines
2.5 KiB
CSS
113 lines
2.5 KiB
CSS
/* 深色模式样式 */
|
|
html[data-theme='dark'] {
|
|
/* 主题色 */
|
|
--color-bg-main: #121826;
|
|
--color-bg-card: #1e293b;
|
|
--color-text-primary: #f3f4f6;
|
|
--color-text-secondary: #cbd5e1;
|
|
--color-text-muted: #94a3b8;
|
|
--color-border: #334155;
|
|
|
|
/* 色彩重写 */
|
|
color-scheme: dark;
|
|
}
|
|
|
|
/* 深色模式主体样式 */
|
|
html[data-theme='dark'] body {
|
|
background-color: var(--color-bg-main);
|
|
color: var(--color-text-primary);
|
|
}
|
|
|
|
/* 深色模式卡片样式 */
|
|
html[data-theme='dark'] .bg-white,
|
|
html[data-theme='dark'] .card {
|
|
background-color: var(--color-bg-card);
|
|
border-color: var(--color-border);
|
|
}
|
|
|
|
/* 深色模式表格样式 */
|
|
html[data-theme='dark'] .data-table thead {
|
|
background-color: #1a2234;
|
|
}
|
|
|
|
html[data-theme='dark'] .data-table tbody tr {
|
|
border-color: var(--color-border);
|
|
}
|
|
|
|
html[data-theme='dark'] .data-table tbody tr:hover {
|
|
background-color: #273145;
|
|
}
|
|
|
|
/* 深色模式表单样式 */
|
|
html[data-theme='dark'] .form-control {
|
|
background-color: #1a2234;
|
|
border-color: var(--color-border);
|
|
color: var(--color-text-primary);
|
|
}
|
|
|
|
html[data-theme='dark'] .form-control:focus {
|
|
border-color: #6366f1;
|
|
}
|
|
|
|
html[data-theme='dark'] .form-label {
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
/* 深色模式文本样式 */
|
|
html[data-theme='dark'] .text-gray-800 {
|
|
color: var(--color-text-primary);
|
|
}
|
|
|
|
html[data-theme='dark'] .text-gray-600,
|
|
html[data-theme='dark'] .text-gray-700 {
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
html[data-theme='dark'] .text-gray-500 {
|
|
color: var(--color-text-muted);
|
|
}
|
|
|
|
/* 深色模式按钮样式 */
|
|
html[data-theme='dark'] .btn-secondary {
|
|
background-color: #334155;
|
|
border-color: #475569;
|
|
color: var(--color-text-primary);
|
|
}
|
|
|
|
html[data-theme='dark'] .btn-secondary:hover {
|
|
background-color: #475569;
|
|
}
|
|
|
|
/* 深色模式模态框 */
|
|
html[data-theme='dark'] .modal-content {
|
|
background-color: var(--color-bg-card);
|
|
}
|
|
|
|
html[data-theme='dark'] .modal-header,
|
|
html[data-theme='dark'] .modal-footer {
|
|
border-color: var(--color-border);
|
|
}
|
|
|
|
html[data-theme='dark'] .modal-footer {
|
|
background-color: #1a2234;
|
|
}
|
|
|
|
/* 深色模式导航栏 */
|
|
html[data-theme='dark'] #mobile-menu .bg-white {
|
|
background-color: var(--color-bg-card);
|
|
}
|
|
|
|
html[data-theme='dark'] #mobile-menu .border-gray-200 {
|
|
border-color: var(--color-border);
|
|
}
|
|
|
|
html[data-theme='dark'] #mobile-menu .hover\:bg-gray-100:hover {
|
|
background-color: #273145;
|
|
}
|
|
|
|
/* 深色模式高亮 */
|
|
html[data-theme='dark'] pre,
|
|
html[data-theme='dark'] code {
|
|
background-color: #0f172a;
|
|
}
|