Migu2.0/frontends/apps/simple-platform-vue/src/styles/themes.ts

/**
 * 主题色板预设
 *
 * 设计原则：
 *   - 每个主题提供一组 CSS 变量，运行时通过 document.documentElement.style.setProperty 注入
 *   - 命名遵循 theme.css 中既有的 --mg-* 体系
 *   - 工业紫色 (industrial-purple) 为默认主题：紫蓝渐变，深蓝底 + 天蓝高光
 */

export interface ThemePreset {
  id: string
  name: string
  description: string
  /** 用于 UI 预览的代表色 */
  preview: string
  /** 强调高光，用于 UI 预览的次代表色 */
  previewAccent: string
  vars: Record<string, string>
}

export const DEFAULT_THEME_ID = 'fame-lavender'

export const THEMES: ThemePreset[] = [
  {
    id: 'fame-lavender',
    name: '迷毂浅紫',
    description: '参考 FAME 系统：深紫侧栏 + 浅紫白主区，柔和耐看，长时间使用不刺眼',
    preview: '#7c3aed',
    previewAccent: '#a855f7',
    vars: {
      // 主色保留紫色（与 FAME 一致），但 hover/accent 使用更明亮的 violet/purple
      '--mg-primary':           '#7c3aed',
      '--mg-primary-rgb':       '124, 58, 237',
      '--mg-primary-hover':     '#8b5cf6',
      '--mg-primary-hover-rgb': '139, 92, 246',
      '--mg-primary-active':    '#5b21b6',
      '--mg-accent':            '#a855f7',
      '--mg-accent-rgb':        '168, 85, 247',

      '--mg-primary-light-3':   '#a78bfa',
      '--mg-primary-light-5':   '#c4b5fd',
      '--mg-primary-light-7':   '#ddd6fe',
      '--mg-primary-light-8':   '#ede9fe',
      '--mg-primary-light-9':   '#f5f3ff',
      '--mg-primary-dark-2':    '#6d28d9',

      // 主区背景：浅紫白色（FAME content #f0eaf6 风格）
      '--mg-bg-app-1':          '#f5f0fb',
      '--mg-bg-app-2':          '#f0eaf6',
      '--mg-bg-app-3':          '#faf7fd',
      '--mg-bg-app-deep-rgb':   '240, 234, 246',

      // 侧栏：FAME 深紫渐变 #2d1b69 -> #1a1040
      '--mg-bg-aside-1':        '#2d1b69',
      '--mg-bg-aside-2':        '#1a1040',
      '--mg-bg-aside-rgb':      '45, 27, 105',

      // 卡片：白底（在 fame-lavender 专属规则中走纯 #fff）
      '--mg-bg-card-rgb':       '255, 255, 255',
      '--mg-bg-card-hi-rgb':    '249, 246, 255',
      '--mg-bg-card-darker-rgb':'245, 240, 251',
      '--mg-shadow-rgb':        '124, 58, 237',

      // 文字：深紫标题 #2d1b69, 中灰正文 #606266
      '--mg-text-tint-rgb':     '45, 27, 105',
      '--mg-text-hi-rgb':       '96, 98, 102',

      // 关闭装饰性 orb
      '--mg-orb-a-opacity':     '0',
      '--mg-orb-b-opacity':     '0',
      '--mg-orb-c-opacity':     '0'
    }
  },
  {
    id: 'industrial-purple',
    name: '星云紫',
    description: '科幻紫主色，辅以蓝紫渐变，磨砂玻璃 · 霓虹辉光',
    preview: '#7c3aed',
    previewAccent: '#c4b5fd',
    vars: {
      // ── 主色：明亮 violet（紫），主导整个画面 ──
      '--mg-primary':         '#7c3aed',
      '--mg-primary-rgb':     '124, 58, 237',
      // hover/辉光：偏蓝紫 indigo,带来氛围流动感
      '--mg-primary-hover':   '#8b5cf6',
      '--mg-primary-hover-rgb': '139, 92, 246',
      '--mg-primary-active':  '#5b21b6',
      // accent:浅紫高光,边缘霓虹与点缀
      '--mg-accent':          '#c4b5fd',
      '--mg-accent-rgb':      '196, 181, 253',

      '--mg-primary-light-3': '#9d6cf2',
      '--mg-primary-light-5': '#b594f7',
      '--mg-primary-light-7': '#6f4eab',
      '--mg-primary-light-8': '#4c357a',
      '--mg-primary-light-9': '#2d1f55',
      '--mg-primary-dark-2':  '#4c1d95',

      // ── 背景：深紫黑底,带 indigo 余晖 ──
      '--mg-bg-app-1':        '#0e0a24',
      '--mg-bg-app-2':        '#1f1147',
      '--mg-bg-app-3':        '#06031a',
      '--mg-bg-app-deep-rgb': '6, 3, 26',

      '--mg-bg-aside-1':      '#0c0820',
      '--mg-bg-aside-2':      '#03020e',
      '--mg-bg-aside-rgb':    '10, 6, 30',

      '--mg-bg-card-rgb':     '38, 24, 78',
      '--mg-bg-card-hi-rgb':  '58, 38, 110',
      '--mg-bg-card-darker-rgb': '20, 12, 48',
      '--mg-shadow-rgb':      '8, 2, 24',

      '--mg-text-tint-rgb':   '242, 232, 255',
      '--mg-text-hi-rgb':     '220, 200, 252',

      '--mg-orb-a-opacity':   '0.55',
      '--mg-orb-b-opacity':   '0.50',
      '--mg-orb-c-opacity':   '0.40'
    }
  },
  {
    id: 'deep-azure',
    name: '深邃蓝',
    description: '科技感深蓝，沉静稳重',
    preview: '#1565c0',
    previewAccent: '#82b1ff',
    vars: {
      '--mg-primary': '#1565c0',
      '--mg-primary-rgb': '21, 101, 192',
      '--mg-primary-hover': '#1976d2',
      '--mg-primary-hover-rgb': '25, 118, 210',
      '--mg-primary-active': '#0d47a1',
      '--mg-accent': '#82b1ff',
      '--mg-accent-rgb': '130, 177, 255',

      '--mg-primary-light-3': '#5a8fce',
      '--mg-primary-light-5': '#83aedb',
      '--mg-primary-light-7': '#adcde7',
      '--mg-primary-light-8': '#c4dbed',
      '--mg-primary-light-9': '#e3eef8',
      '--mg-primary-dark-2': '#0d47a1',

      '--mg-bg-app-1': '#051a3a',
      '--mg-bg-app-2': '#0a2f6b',
      '--mg-bg-app-3': '#020a1f',
      '--mg-bg-app-deep-rgb': '2, 8, 26',

      '--mg-bg-aside-1': '#06122a',
      '--mg-bg-aside-2': '#02060f',
      '--mg-bg-aside-rgb': '8, 18, 42',

      '--mg-bg-card-rgb': '12, 36, 80',
      '--mg-bg-card-hi-rgb': '18, 50, 110',
      '--mg-bg-card-darker-rgb': '6, 18, 44',
      '--mg-shadow-rgb': '2, 4, 14',

      '--mg-text-tint-rgb': '218, 234, 252',
      '--mg-text-hi-rgb': '170, 200, 240'
    }
  },
  {
    id: 'emerald-forge',
    name: '翡翠绿',
    description: '机械翡翠绿，沉稳活力',
    preview: '#00796b',
    previewAccent: '#80cbc4',
    vars: {
      '--mg-primary': '#00796b',
      '--mg-primary-rgb': '0, 121, 107',
      '--mg-primary-hover': '#00897b',
      '--mg-primary-hover-rgb': '0, 137, 123',
      '--mg-primary-active': '#004d40',
      '--mg-accent': '#80cbc4',
      '--mg-accent-rgb': '128, 203, 196',

      '--mg-primary-light-3': '#4ca094',
      '--mg-primary-light-5': '#79b9b0',
      '--mg-primary-light-7': '#a6d2cc',
      '--mg-primary-light-8': '#bfdfdb',
      '--mg-primary-light-9': '#e1f0ee',
      '--mg-primary-dark-2': '#004d40',

      '--mg-bg-app-1': '#06241f',
      '--mg-bg-app-2': '#0a4538',
      '--mg-bg-app-3': '#020f0c',
      '--mg-bg-app-deep-rgb': '2, 12, 10',

      '--mg-bg-aside-1': '#061a16',
      '--mg-bg-aside-2': '#020a08',
      '--mg-bg-aside-rgb': '8, 26, 22',

      '--mg-bg-card-rgb': '10, 50, 42',
      '--mg-bg-card-hi-rgb': '14, 66, 56',
      '--mg-bg-card-darker-rgb': '6, 28, 24',
      '--mg-shadow-rgb': '2, 10, 8',

      '--mg-text-tint-rgb': '220, 244, 240',
      '--mg-text-hi-rgb': '170, 220, 210'
    }
  },
  {
    id: 'crimson-iron',
    name: '熔铁赤',
    description: '熔铁炉火般的暗红工业风',
    preview: '#b71c1c',
    previewAccent: '#ff8a80',
    vars: {
      '--mg-primary': '#b71c1c',
      '--mg-primary-rgb': '183, 28, 28',
      '--mg-primary-hover': '#d32f2f',
      '--mg-primary-hover-rgb': '211, 47, 47',
      '--mg-primary-active': '#8a0c0c',
      '--mg-accent': '#ff8a80',
      '--mg-accent-rgb': '255, 138, 128',

      '--mg-primary-light-3': '#c95a5a',
      '--mg-primary-light-5': '#d68585',
      '--mg-primary-light-7': '#e4afaf',
      '--mg-primary-light-8': '#edc8c8',
      '--mg-primary-light-9': '#f7e6e6',
      '--mg-primary-dark-2': '#8a0c0c',

      '--mg-bg-app-1': '#2a0606',
      '--mg-bg-app-2': '#4a0c0c',
      '--mg-bg-app-3': '#150303',
      '--mg-bg-app-deep-rgb': '20, 4, 4',

      '--mg-bg-aside-1': '#200505',
      '--mg-bg-aside-2': '#0c0202',
      '--mg-bg-aside-rgb': '36, 6, 6',

      '--mg-bg-card-rgb': '60, 10, 10',
      '--mg-bg-card-hi-rgb': '80, 14, 14',
      '--mg-bg-card-darker-rgb': '34, 5, 5',
      '--mg-shadow-rgb': '10, 1, 1',

      '--mg-text-tint-rgb': '252, 220, 220',
      '--mg-text-hi-rgb': '240, 175, 175'
    }
  },
  {
    id: 'graphite-steel',
    name: '石墨钢',
    description: '中性冷灰，纯粹工业',
    preview: '#455a64',
    previewAccent: '#b0bec5',
    vars: {
      '--mg-primary': '#455a64',
      '--mg-primary-rgb': '69, 90, 100',
      '--mg-primary-hover': '#607d8b',
      '--mg-primary-hover-rgb': '96, 125, 139',
      '--mg-primary-active': '#263238',
      '--mg-accent': '#b0bec5',
      '--mg-accent-rgb': '176, 190, 197',

      '--mg-primary-light-3': '#7a8a92',
      '--mg-primary-light-5': '#9aa6ac',
      '--mg-primary-light-7': '#bac2c7',
      '--mg-primary-light-8': '#ccd2d6',
      '--mg-primary-light-9': '#e8ebed',
      '--mg-primary-dark-2': '#263238',

      '--mg-bg-app-1': '#161e24',
      '--mg-bg-app-2': '#243038',
      '--mg-bg-app-3': '#0a0e12',
      '--mg-bg-app-deep-rgb': '10, 14, 18',

      '--mg-bg-aside-1': '#11181d',
      '--mg-bg-aside-2': '#060a0d',
      '--mg-bg-aside-rgb': '18, 26, 32',

      '--mg-bg-card-rgb': '30, 42, 50',
      '--mg-bg-card-hi-rgb': '42, 56, 66',
      '--mg-bg-card-darker-rgb': '16, 22, 28',
      '--mg-shadow-rgb': '4, 6, 10',

      '--mg-text-tint-rgb': '226, 232, 238',
      '--mg-text-hi-rgb': '186, 198, 210'
    }
  },
  {
    id: 'amber-forge',
    name: '琥珀金',
    description: '高对比的橙金调，警示与活力并存',
    preview: '#e65100',
    previewAccent: '#ffb74d',
    vars: {
      '--mg-primary': '#e65100',
      '--mg-primary-rgb': '230, 81, 0',
      '--mg-primary-hover': '#f57c00',
      '--mg-primary-hover-rgb': '245, 124, 0',
      '--mg-primary-active': '#bf360c',
      '--mg-accent': '#ffb74d',
      '--mg-accent-rgb': '255, 183, 77',

      '--mg-primary-light-3': '#ec8344',
      '--mg-primary-light-5': '#f2a474',
      '--mg-primary-light-7': '#f7c4a3',
      '--mg-primary-light-8': '#fad6bc',
      '--mg-primary-light-9': '#fdeadd',
      '--mg-primary-dark-2': '#bf360c',

      '--mg-bg-app-1': '#2a1404',
      '--mg-bg-app-2': '#4a2a0c',
      '--mg-bg-app-3': '#150a02',
      '--mg-bg-app-deep-rgb': '20, 10, 4',

      '--mg-bg-aside-1': '#200f04',
      '--mg-bg-aside-2': '#0c0602',
      '--mg-bg-aside-rgb': '34, 16, 6',

      '--mg-bg-card-rgb': '62, 32, 8',
      '--mg-bg-card-hi-rgb': '82, 44, 12',
      '--mg-bg-card-darker-rgb': '34, 16, 4',
      '--mg-shadow-rgb': '10, 4, 1',

      '--mg-text-tint-rgb': '252, 232, 210',
      '--mg-text-hi-rgb': '240, 196, 140'
    }
  }
]

export function findTheme(id: string | undefined | null): ThemePreset {
  if (!id) return THEMES[0]
  return THEMES.find((t) => t.id === id) ?? THEMES[0]
}

/** 把主题变量写入 :root；多次调用幂等，会覆盖同名属性 */
export function applyThemeVars(preset: ThemePreset): void {
  const root = document.documentElement
  for (const [key, value] of Object.entries(preset.vars)) {
    root.style.setProperty(key, value)
  }
  root.setAttribute('data-theme', preset.id)
}