src/assets/css/ultimate-performance-theme.css
/**
 * 终极性能主题样式
 * 专为解决Chrome "重新计算样式"卡顿问题而设计
 * 采用最精简的选择器和最少的CSS规则
 */

/* =============================================================================
   基础主题变量（最小化自定义属性）
   ============================================================================= */

:root {
  /* 只保留最核心的颜色变量 */
  --primary-bg: #ffffff;
  --primary-text: #000000;
  --border-color: #e5e7eb;
  --accent-color: #3b82f6;
}

[data-theme="dark"] {
  --primary-bg: #1f2937;
  --primary-text: rgba(255, 255, 255, 0.87);
  --border-color: #374151;
  --accent-color: #60a5fa;
}

/* =============================================================================
   极简主题样式（避免复杂选择器）
   ============================================================================= */

/* 基础背景和文本 */
html {
  background-color: var(--primary-bg);
  color: var(--primary-text);
}

body {
  background-color: var(--primary-bg);
  color: var(--primary-text);
}

/* 常用元素 */
.bg-white { background-color: var(--primary-bg); }
.text-gray-900 { color: var(--primary-text); }
.border-gray-200 { border-color: var(--border-color); }

/* 输入框 */
input,
textarea,
select {
  background-color: var(--primary-bg);
  color: var(--primary-text);
  border-color: var(--border-color);
}

/* 按钮 */
.btn-primary {
  background-color: var(--accent-color);
  border-color: var(--accent-color);
  color: #ffffff;
}

/* 卡片 */
.card {
  background-color: var(--primary-bg);
  border-color: var(--border-color);
}

/* =============================================================================
   性能优化规则
   ============================================================================= */

/* 禁用过渡时的样式 */
.transition-disabled *,
.transition-disabled *::before,
.transition-disabled *::after {
  transition: none !important;
  animation: none !important;
  transform: none !important;
}

/* GPU加速 */
html[data-ultimate-performance="true"] {
  transform: translateZ(0);
  will-change: auto;
  backface-visibility: hidden;
}

/* =============================================================================
   暗色主题特定样式（最小化）
   ============================================================================= */

[data-theme="dark"] {
  /* 确保关键元素立即切换 */
  background-color: #1f2937;
  color: rgba(255, 255, 255, 0.87);
}

[data-theme="dark"] body {
  background-color: #1f2937;
  color: rgba(255, 255, 255, 0.87);
}

[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select {
  background-color: #374151;
  color: rgba(255, 255, 255, 0.87);
  border-color: #4b5563;
}

[data-theme="dark"] .card {
  background-color: #374151;
  border-color: #4b5563;
}

/* =============================================================================
   兼容性样式
   ============================================================================= */

/* Bootstrap兼容 */
[data-bs-theme="dark"] {
  color-scheme: dark;
}

[data-bs-theme="light"] {
  color-scheme: light;
}

/* 防止FOUC */
html:not([data-theme]) {
  visibility: hidden;
}

html[data-theme] {
  visibility: visible;
}
