laobinghu
f5c6a6991b
Disable SSR (ssr: false) for development stability, add dark-mode.css with CSS variables for light/dark theme switching
133 lines
3.0 KiB
CSS
133 lines
3.0 KiB
CSS
/* 暗色模式 CSS 变量 */
|
|
:root {
|
|
--sidebar-bg: #1e293b;
|
|
--sidebar-header-bg: #0f172a;
|
|
--sidebar-hover-bg: #334155;
|
|
--sidebar-text: #94a3b8;
|
|
--sidebar-active-text: #fff;
|
|
--sidebar-active-bg: #3b82f6;
|
|
--header-bg: #ffffff;
|
|
--header-border: #e2e8f0;
|
|
--header-text: #1e293b;
|
|
--main-bg: #f8fafc;
|
|
--main-text: #1e293b;
|
|
--footer-bg: #ffffff;
|
|
--footer-border: #e2e8f0;
|
|
--footer-text: #64748b;
|
|
}
|
|
|
|
html.dark {
|
|
--sidebar-bg: #0f172a;
|
|
--sidebar-header-bg: #020617;
|
|
--sidebar-hover-bg: #1e293b;
|
|
--sidebar-text: #cbd5e1;
|
|
--sidebar-active-text: #fff;
|
|
--sidebar-active-bg: #3b82f6;
|
|
--header-bg: #1e293b;
|
|
--header-border: #334155;
|
|
--header-text: #f1f5f9;
|
|
--main-bg: #0f172a;
|
|
--main-text: #f1f5f9;
|
|
--footer-bg: #1e293b;
|
|
--footer-border: #334155;
|
|
--footer-text: #cbd5e1;
|
|
}
|
|
|
|
/* 基础样式 */
|
|
body {
|
|
color: var(--main-text);
|
|
background-color: var(--main-bg);
|
|
}
|
|
|
|
/* ========== Element Plus 暗色模式全局覆盖 ========== */
|
|
|
|
/* 输入框、文本框、选择器 */
|
|
html.dark .el-input__inner,
|
|
html.dark .el-textarea__inner,
|
|
html.dark .el-select .el-input__inner,
|
|
html.dark .el-cascader .el-input__inner {
|
|
color: var(--header-text) !important;
|
|
background-color: var(--header-bg) !important;
|
|
border-color: var(--header-border) !important;
|
|
}
|
|
|
|
/* 选择器下拉项 */
|
|
html.dark .el-select-dropdown__item {
|
|
color: var(--header-text) !important;
|
|
}
|
|
|
|
html.dark .el-select-dropdown__item.selected {
|
|
color: var(--sidebar-active-text) !important;
|
|
background-color: var(--sidebar-active-bg) !important;
|
|
}
|
|
|
|
html.dark .el-select-dropdown__item.hover {
|
|
background-color: var(--sidebar-hover-bg) !important;
|
|
}
|
|
|
|
/* 表单标签 */
|
|
html.dark .el-form-item__label {
|
|
color: var(--header-text) !important;
|
|
}
|
|
|
|
/* 表格 */
|
|
html.dark .el-table {
|
|
color: var(--header-text);
|
|
}
|
|
|
|
html.dark .el-table th {
|
|
background-color: var(--header-bg);
|
|
color: var(--header-text);
|
|
}
|
|
|
|
html.dark .el-table tr {
|
|
background-color: var(--header-bg);
|
|
}
|
|
|
|
html.dark .el-table td {
|
|
color: var(--header-text);
|
|
}
|
|
|
|
/* 卡片 */
|
|
html.dark .el-card {
|
|
background-color: var(--header-bg);
|
|
color: var(--header-text);
|
|
}
|
|
|
|
html.dark .el-card .el-card__header {
|
|
border-bottom-color: var(--header-border);
|
|
}
|
|
|
|
/* 标签 */
|
|
html.dark .el-tag {
|
|
background-color: var(--sidebar-bg) !important;
|
|
border-color: var(--header-border) !important;
|
|
color: var(--header-text) !important;
|
|
}
|
|
|
|
/* 按钮文字颜色 */
|
|
html.dark .el-button--default {
|
|
color: var(--header-text);
|
|
background-color: var(--header-bg);
|
|
border-color: var(--header-border);
|
|
}
|
|
|
|
html.dark .el-button--primary {
|
|
background-color: var(--sidebar-active-bg) !important;
|
|
border-color: var(--sidebar-active-bg) !important;
|
|
color: #fff !important;
|
|
}
|
|
|
|
/* 级联选择器、日期选择器等 */
|
|
html.dark .el-cascader .el-input__inner,
|
|
html.dark .el-date-editor .el-input__inner {
|
|
color: var(--header-text) !important;
|
|
background-color: var(--header-bg) !important;
|
|
border-color: var(--header-border) !important;
|
|
}
|
|
|
|
/* 占位符 */
|
|
html.dark .el-input__inner::placeholder {
|
|
color: var(--footer-text) !important;
|
|
}
|