src/assets/css/theme-performance-optimized.css
/* 性能优化的主题切换样式 */

/* 完全禁用主题切换动画 - 性能优化 */
:root {
  /* 主题切换过渡变量已禁用 */
  --theme-transition-duration: 0ms;
  --theme-transition-timing: none;
  
  /* 避免大量DOM查询的通用颜色变量 */
  --theme-text-primary: var(--bc);
  --theme-bg-primary: var(--b1);
  --theme-bg-secondary: var(--b2);
  --theme-border: var(--b3);
}

/* 禁用所有主题相关的过渡动画 */
html[data-theme] {
  color-scheme: light dark;
  transition: none !important;
}

/* 禁用所有元素的主题切换动画 */
html[data-theme] *,
html[data-theme] body,
html[data-theme] .card,
html[data-theme] .btn,
html[data-theme] .input,
html[data-theme] .textarea,
html[data-theme] .select,
html[data-theme] .modal,
html[data-theme] .dropdown {
  transition: none !important;
  animation: none !important;
}

/* 即时切换模式 - 性能优化 */
html.theme-switching,
html.theme-switching *,
html.theme-switching body,
html.theme-switching .card,
html.theme-switching .btn,
html.theme-switching .input,
html.theme-switching .textarea,
html.theme-switching .select {
  transition: none !important;
  animation: none !important;
}

/* 5. 使用 contain 属性优化重绘 */
.theme-container {
  contain: layout style paint;
}

.settings-drawer-container,
.app-container,
.content-area {
  contain: layout style;
}

/* 禁用所有玻璃效果的主题动画 */
@supports (backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px)) {
  html[data-theme] .glass-effect {
    transition: none !important;
  }
}

/* 7. 优化暗色主题 - 减少重复选择器 */
[data-theme="dark"] {
  color-scheme: dark;
  --theme-text-primary: rgba(255, 255, 255, 0.87);
  --theme-text-secondary: rgba(255, 255, 255, 0.65);
  --theme-bg-primary: hsl(var(--b1));
  --theme-bg-secondary: hsl(var(--b2));
  --theme-border: hsl(var(--b3));
}

/* 使用自定义属性而不是重复的选择器 */
[data-theme="dark"] .text-content {
  color: var(--theme-text-primary);
}

[data-theme="dark"] .bg-content {
  background-color: var(--theme-bg-primary);
}

[data-theme="dark"] .border-content {
  border-color: var(--theme-border);
}

/* 8. 减少 !important 的使用 */
[data-theme="dark"] .force-dark-text {
  color: var(--theme-text-primary);
}

/* 9. 性能友好的主题特定样式 */
[data-theme="light"] .theme-optimized {
  background-color: #ffffff;
  color: #000000;
}

[data-theme="dark"] .theme-optimized {
  background-color: hsl(var(--b1));
  color: hsl(var(--bc));
}

/* 10. 减少复杂选择器的组合 */
.theme-text {
  color: hsl(var(--bc));
}

.theme-bg {
  background-color: hsl(var(--b1));
}

.theme-border {
  border-color: hsl(var(--b3));
}

/* 11. 媒体查询优化 */
@media (prefers-reduced-motion: reduce) {
  html[data-theme],
  html[data-theme] *,
  .theme-container,
  .theme-container * {
    transition: none !important;
    animation: none !important;
  }
}

/* 12. 避免强制同步布局的样式 */
.theme-layout-stable {
  will-change: auto;
  transform: translateZ(0); /* 创建新的层叠上下文 */
}

/* 13. 特定组件的优化样式 */
.settings-drawer-container[data-theme="dark"] {
  background-color: rgba(22, 25, 30, 0.95);
  color: rgba(255, 255, 255, 0.9);
}

.settings-drawer-container[data-theme="light"] {
  background-color: rgba(255, 255, 255, 0.95);
  color: rgba(0, 0, 0, 0.87);
}
