src/assets/css/global.css
/* 在:root中添加侧边栏半透明相关变量 */
:root {
  /* 侧边栏半透明效果相关变量 */
  --sidebar-bg-opacity: 0.65;
  --sidebar-bg-color: 18, 18, 18;
  --sidebar-backdrop-filter: blur(12px);
  --sidebar-bg: rgba(240, 245, 255, var(--sidebar-bg-opacity));
  --sidebar-border-color: rgba(0, 0, 0, 0.05);
  --sidebar-shadow: 0 0 20px rgba(0, 0, 0, 0.08);
  --sidebar-text-color: rgba(0, 0, 0, 0.8);
  --sidebar-text-hover-color: rgba(0, 0, 0, 1);
  --sidebar-active-bg: rgba(0, 0, 0, 0.08);
  --sidebar-hover-bg: rgba(0, 0, 0, 0.05);

  /* 替换el-color变量为daisyUI的hsl变量 */
  --theme-color: hsl(var(--p));
  --theme-color-light: hsl(var(--p) / 0.7);
  --theme-color-dark: hsl(var(--p) / 1.2);

  /* 图表相关变量 */
  --chart-bg-color: rgba(255, 255, 255, 0.7);
  --chart-text-color: #333;
  --chart-grid-color: #eee;
  --chart-axis-color: #ddd;
}

/* 深色模式下的变量 */
html.dark-mode {
  /* 侧边栏半透明效果相关变量 - 深色模式专用 */
  --sidebar-bg-opacity: 0.65;
  --sidebar-bg-color: 18, 18, 18;
  --sidebar-backdrop-filter: blur(12px);
  --sidebar-bg: rgba(22, 25, 30, var(--sidebar-bg-opacity));
  --sidebar-border-color: rgba(255, 255, 255, 0.05);
  --sidebar-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
  --sidebar-text-color: rgba(255, 255, 255, 0.8);
  --sidebar-text-hover-color: rgba(255, 255, 255, 1);
  --sidebar-active-bg: rgba(255, 255, 255, 0.1);
  --sidebar-hover-bg: rgba(255, 255, 255, 0.05);

  /* 图表深色模式相关变量 */
  --chart-bg-color: rgba(40, 44, 52, 0.8);
  --chart-text-color: #eee;
  --chart-grid-color: #333;
  --chart-axis-color: #444;
}

/* 暗色模式强制文本颜色覆盖 */
html.dark-mode,
html[data-theme="dark"],
[data-theme="dark"] {
  color: rgba(255, 255, 255, 0.87) !important;
}

html.dark-mode *,
html[data-theme="dark"] *,
[data-theme="dark"] * {
  color: inherit;
}

/* 确保主要容器在暗色模式下有正确的文本颜色 */
html.dark-mode .app-container,
html.dark-mode .content-area,
html.dark-mode .home-view,
html.dark-mode .main-content,
html[data-theme="dark"] .app-container,
html[data-theme="dark"] .content-area,
html[data-theme="dark"] .home-view,
html[data-theme="dark"] .main-content,
[data-theme="dark"] .app-container,
[data-theme="dark"] .content-area,
[data-theme="dark"] .home-view,
[data-theme="dark"] .main-content {
  color: rgba(255, 255, 255, 0.87);
}

/* 确保标题和重要文本在暗色模式下可见 */
html.dark-mode h1,
html.dark-mode h2,
html.dark-mode h3,
html.dark-mode h4,
html.dark-mode h5,
html.dark-mode h6,
html.dark-mode .text-base-content,
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6,
html[data-theme="dark"] .text-base-content,
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6,
[data-theme="dark"] .text-base-content {
  color: rgba(255, 255, 255, 0.95) !important;
}

/* 更强的暗色模式文本颜色覆盖 - 覆盖所有可能的文本元素 */
html.dark-mode p,
html.dark-mode span,
html.dark-mode div,
html.dark-mode label,
html.dark-mode td,
html.dark-mode th,
html.dark-mode li,
html.dark-mode a,
html.dark-mode button,
html.dark-mode input,
html.dark-mode textarea,
html.dark-mode select,
html[data-theme="dark"] p,
html[data-theme="dark"] span,
html[data-theme="dark"] div,
html[data-theme="dark"] label,
html[data-theme="dark"] td,
html[data-theme="dark"] th,
html[data-theme="dark"] li,
html[data-theme="dark"] a,
html[data-theme="dark"] button,
html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select,
[data-theme="dark"] p,
[data-theme="dark"] span,
[data-theme="dark"] div,
[data-theme="dark"] label,
[data-theme="dark"] td,
[data-theme="dark"] th,
[data-theme="dark"] li,
[data-theme="dark"] a,
[data-theme="dark"] button,
[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select {
  color: rgba(255, 255, 255, 0.87) !important;
}

/* 特别覆盖可能有黑色文本的class */
html.dark-mode .text-black,
html.dark-mode .text-gray-900,
html.dark-mode .text-gray-800,
html.dark-mode .text-gray-700,
html[data-theme="dark"] .text-black,
html[data-theme="dark"] .text-gray-900,
html[data-theme="dark"] .text-gray-800,
html[data-theme="dark"] .text-gray-700,
[data-theme="dark"] .text-black,
[data-theme="dark"] .text-gray-900,
[data-theme="dark"] .text-gray-800,
[data-theme="dark"] .text-gray-700 {
  color: rgba(255, 255, 255, 0.87) !important;
}

/* 强制覆盖任何内联样式的黑色文本 */
html.dark-mode [style*="color: black"],
html.dark-mode [style*="color: rgb(0, 0, 0)"],
html.dark-mode [style*="color: #000"],
html[data-theme="dark"] [style*="color: black"],
html[data-theme="dark"] [style*="color: rgb(0, 0, 0)"],
html[data-theme="dark"] [style*="color: #000"],
[data-theme="dark"] [style*="color: black"],
[data-theme="dark"] [style*="color: rgb(0, 0, 0)"],
[data-theme="dark"] [style*="color: #000"] {
  color: rgba(255, 255, 255, 0.87) !important;
}

/* 确保 DaisyUI 组件在暗色模式下有正确的文本颜色 */
html.dark-mode .card,
html.dark-mode .card-body,
html.dark-mode .card-title,
html.dark-mode .btn,
html.dark-mode .btn-primary,
html.dark-mode .btn-secondary,
html.dark-mode .btn-ghost,
html[data-theme="dark"] .card,
html[data-theme="dark"] .card-body,
html[data-theme="dark"] .card-title,
html[data-theme="dark"] .btn,
html[data-theme="dark"] .btn-primary,
html[data-theme="dark"] .btn-secondary,
html[data-theme="dark"] .btn-ghost,
[data-theme="dark"] .card,
[data-theme="dark"] .card-body,
[data-theme="dark"] .card-title,
[data-theme="dark"] .btn,
[data-theme="dark"] .btn-primary,
[data-theme="dark"] .btn-secondary,
[data-theme="dark"] .btn-ghost {
  color: rgba(255, 255, 255, 0.87) !important;
}

/* 强制所有可能的文本类元素在暗色模式下为白色 */
html.dark-mode
  *:not(.text-primary):not(.text-secondary):not(.text-accent):not(
    .text-success
  ):not(.text-warning):not(.text-error),
html[data-theme="dark"]
  *:not(.text-primary):not(.text-secondary):not(.text-accent):not(
    .text-success
  ):not(.text-warning):not(.text-error),
[data-theme="dark"]
  *:not(.text-primary):not(.text-secondary):not(.text-accent):not(
    .text-success
  ):not(.text-warning):not(.text-error) {
  color: rgba(255, 255, 255, 0.87) !important;
}

/* 终极暗色模式文本颜色覆盖 - 最高优先级 */
html.dark-mode *,
html.dark-mode *:before,
html.dark-mode *:after,
html[data-theme="dark"] *,
html[data-theme="dark"] *:before,
html[data-theme="dark"] *:after,
[data-theme="dark"] *,
[data-theme="dark"] *:before,
[data-theme="dark"] *:after {
  color: rgba(255, 255, 255, 0.87) !important;
}

/* 特殊情况：保留有颜色意义的元素 */
html.dark-mode .text-primary,
html.dark-mode .text-secondary,
html.dark-mode .text-accent,
html.dark-mode .text-success,
html.dark-mode .text-warning,
html.dark-mode .text-error,
html.dark-mode .text-info,
html.dark-mode .btn-primary,
html.dark-mode .btn-secondary,
html.dark-mode .btn-accent,
html.dark-mode .btn-success,
html.dark-mode .btn-warning,
html.dark-mode .btn-error,
html.dark-mode .btn-info,
html[data-theme="dark"] .text-primary,
html[data-theme="dark"] .text-secondary,
html[data-theme="dark"] .text-accent,
html[data-theme="dark"] .text-success,
html[data-theme="dark"] .text-warning,
html[data-theme="dark"] .text-error,
html[data-theme="dark"] .text-info,
html[data-theme="dark"] .btn-primary,
html[data-theme="dark"] .btn-secondary,
html[data-theme="dark"] .btn-accent,
html[data-theme="dark"] .btn-success,
html[data-theme="dark"] .btn-warning,
html[data-theme="dark"] .btn-error,
html[data-theme="dark"] .btn-info,
[data-theme="dark"] .text-primary,
[data-theme="dark"] .text-secondary,
[data-theme="dark"] .text-accent,
[data-theme="dark"] .text-success,
[data-theme="dark"] .text-warning,
[data-theme="dark"] .text-error,
[data-theme="dark"] .text-info,
[data-theme="dark"] .btn-primary,
[data-theme="dark"] .btn-secondary,
[data-theme="dark"] .btn-accent,
[data-theme="dark"] .btn-success,
[data-theme="dark"] .btn-warning,
[data-theme="dark"] .btn-error,
[data-theme="dark"] .btn-info {
  color: inherit !important;
}

/* 确保图表等特殊组件的文本也变白 */
html.dark-mode .echarts-text,
html.dark-mode .chart-text,
html.dark-mode .chart-label,
html.dark-mode canvas + *,
html[data-theme="dark"] .echarts-text,
html[data-theme="dark"] .chart-text,
html[data-theme="dark"] .chart-label,
html[data-theme="dark"] canvas + *,
[data-theme="dark"] .echarts-text,
[data-theme="dark"] .chart-text,
[data-theme="dark"] .chart-label,
[data-theme="dark"] canvas + * {
  color: rgba(255, 255, 255, 0.87) !important;
}

/* 强制覆盖所有可能的内联样式和computed样式 */
html.dark-mode [style*="color"],
html[data-theme="dark"] [style*="color"],
[data-theme="dark"] [style*="color"] {
  color: rgba(255, 255, 255, 0.87) !important;
}
