youlai-app/src/styles/theme.scss

// ==========================================================================
// 主题变量系统
// ==========================================================================
// 遵循文档规范，提供完整的明暗主题支持
// 使用 CSS 变量实现主题切换，支持 wot-design-uni 组件库

// ==========================================================================
// 默认主题 (light)
// ==========================================================================
:root,
page {
  // -----------------------------------------------------------------------
  // z-index 层级变量
  // -----------------------------------------------------------------------
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 300;
  --z-popup: 400;
  --z-dialog: 500;
  --z-toast: 600;
  --z-navbar: 700;
  --z-fab: 800;

  // -----------------------------------------------------------------------
  // 主题色
  // -----------------------------------------------------------------------
  --color-primary: #4d80f0;
  --color-primary-light: #e8f0fe;
  --color-primary-dark: #2563eb;
  --color-success: #34d19d;
  --color-success-light: #e6f7f1;
  --color-warning: #f0883a;
  --color-warning-light: #fff4e6;
  --color-danger: #ff4757;
  --color-danger-light: #fff1f2;
  --color-wx-green: #22c55e;

  // -----------------------------------------------------------------------
  // 背景色 (Material Design)
  // -----------------------------------------------------------------------
  --color-bg: #ffffff;
  --color-bg-secondary: #f5f5f5;
  --color-bg-tertiary: #f1f5f9;

  // -----------------------------------------------------------------------
  // 文字颜色
  // -----------------------------------------------------------------------
  --color-text: #1f2937;
  --color-text-secondary: #6b7280;
  --color-text-placeholder: #9ca3af;
  --color-text-disabled: #d1d5db;
  --color-text-inverse: #ffffff;

  // -----------------------------------------------------------------------
  // 边框颜色
  // -----------------------------------------------------------------------
  --color-border: #e5e7eb;
  --color-border-light: #f3f4f6;
  --color-border-dark: #d1d5db;
  --color-border-glass: rgba(148, 163, 184, 0.22);
  --color-border-glass-strong: rgba(255, 255, 255, 0.9);
  --color-danger-shadow: rgba(239, 68, 68, 0.08);

  // -----------------------------------------------------------------------
  // 毛玻璃效果色
  // -----------------------------------------------------------------------
  --color-glass: rgba(255, 255, 255, 0.22);
  --color-glass-light: rgba(255, 255, 255, 0.12);
  --color-bg-alpha-95: rgba(255, 255, 255, 0.95);

  // -----------------------------------------------------------------------
  // 主题色透明度变体
  // -----------------------------------------------------------------------
  --color-primary-alpha-20: rgba(77, 128, 240, 0.2);
  --color-primary-alpha-15: rgba(77, 128, 240, 0.15);

  // -----------------------------------------------------------------------
  // 阴影
  // -----------------------------------------------------------------------
  --shadow-sm: 0 2rpx 4rpx rgba(0, 0, 0, 0.05);
  --shadow-md: 0 8rpx 12rpx rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 20rpx 30rpx rgba(0, 0, 0, 0.1);

  // -----------------------------------------------------------------------
  // wot-design-uni 组件库变量
  // -----------------------------------------------------------------------
  --wot-color-theme: var(--color-primary);
  --wot-color-success: var(--color-success);
  --wot-color-warning: var(--color-warning);
  --wot-color-danger: var(--color-danger);
  --wot-button-normal-bg: var(--color-bg);
  --wot-color-bg: var(--color-bg);
  --wot-color-bg-light: var(--color-bg-secondary);
  --wot-color-text: var(--color-text);
  --wot-color-text-secondary: var(--color-text-secondary);
  --wot-color-text-placeholder: var(--color-text-placeholder);
  --wot-color-border: var(--color-border);

  // -----------------------------------------------------------------------
  // 间距规范（8rpx 网格基数）
  // -----------------------------------------------------------------------
  // 基数：4rpx / 8rpx / 16rpx / 24rpx / 32rpx / 40rpx / 48rpx / 64rpx
  --spacing-xxs: 4rpx;
  --spacing-xs: 8rpx;
  --spacing-sm: 16rpx;
  --spacing-md: 24rpx;
  --spacing-lg: 32rpx;
  --spacing-xl: 40rpx;
  --spacing-xxl: 48rpx;
  --spacing-page: 32rpx;
  --spacing-card: 24rpx;
  --spacing-section: 24rpx;
  --spacing-element: 16rpx;
  --spacing-compact: 8rpx;
}

// ==========================================================================
// 暗黑主题 (dark)
// ==========================================================================
.wot-theme-dark {
  // -----------------------------------------------------------------------
  // 主题色
  // -----------------------------------------------------------------------
  --color-primary: #3b82f6;
  --color-primary-light: #1e3a5f;
  --color-primary-dark: #60a5fa;
  --color-success: #34d399;
  --color-success-light: #064e3b;
  --color-warning: #fbbf24;
  --color-warning-light: #78350f;
  --color-danger: #f87171;
  --color-danger-light: #7f1d1d;
  --color-wx-green: #22c55e;

  // -----------------------------------------------------------------------
  // 背景色 (Material Design) - 不使用纯黑 #000000
  // -----------------------------------------------------------------------
  --color-bg: #1f2937;
  --color-bg-secondary: #111827;
  --color-bg-tertiary: #1e293b;

  // -----------------------------------------------------------------------
  // 文字颜色
  // -----------------------------------------------------------------------
  --color-text: #f9fafb;
  --color-text-secondary: #9ca3af;
  --color-text-placeholder: #6b7280;
  --color-text-disabled: #4b5563;
  --color-text-inverse: #1f2937;

  // -----------------------------------------------------------------------
  // 边框颜色
  // -----------------------------------------------------------------------
  --color-border: #374151;
  --color-border-light: #1f2937;
  --color-border-dark: #4b5563;
  --color-border-glass: rgba(148, 163, 184, 0.15);
  --color-border-glass-strong: rgba(255, 255, 255, 0.9);
  --color-danger-shadow: rgba(239, 68, 68, 0.15);

  // -----------------------------------------------------------------------
  // 毛玻璃效果色
  // -----------------------------------------------------------------------
  --color-glass: rgba(255, 255, 255, 0.12);
  --color-glass-light: rgba(255, 255, 255, 0.06);
  --color-bg-alpha-95: rgba(31, 41, 55, 0.95);

  // -----------------------------------------------------------------------
  // 主题色透明度变体
  // -----------------------------------------------------------------------
  --color-primary-alpha-20: rgba(59, 130, 246, 0.2);
  --color-primary-alpha-15: rgba(59, 130, 246, 0.15);

  // -----------------------------------------------------------------------
  // 阴影
  // -----------------------------------------------------------------------
  --shadow-sm: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
  --shadow-md: 0 8rpx 12rpx rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 20rpx 30rpx rgba(0, 0, 0, 0.4);

  // -----------------------------------------------------------------------
  // wot-design-uni 组件库变量
  // -----------------------------------------------------------------------
  --wot-color-theme: var(--color-primary);
  --wot-color-success: var(--color-success);
  --wot-color-warning: var(--color-warning);
  --wot-color-danger: var(--color-danger);
  --wot-button-normal-bg: var(--color-bg-secondary);
  --wot-color-bg: var(--color-bg);
  --wot-color-bg-light: var(--color-bg-secondary);
  --wot-color-text: var(--color-text);
  --wot-color-text-secondary: var(--color-text-secondary);
  --wot-color-text-placeholder: var(--color-text-placeholder);
  --wot-color-border: var(--color-border);
}