统一 outpost-light/purple/blue 壳层 token,修复扩展字段与操作按钮在浅色下的可读性。 Co-authored-by: Cursor <cursoragent@cursor.com>
458 lines
16 KiB
TypeScript
458 lines
16 KiB
TypeScript
/**
|
||
* 主题色板预设
|
||
*
|
||
* 主路径:Outpost 壳层三套精选(浅色 / 紫色 / 蓝色)
|
||
* 高级:旧深色霓虹主题(LEGACY_THEMES)
|
||
* 规范:docs/superpowers/specs/2026-07-25-migu-outpost-ui-lock-design.md
|
||
*/
|
||
|
||
export interface ThemePreset {
|
||
id: string
|
||
name: string
|
||
description: string
|
||
/** 用于 UI 预览的代表色 */
|
||
preview: string
|
||
/** 强调高光,用于 UI 预览的次代表色 */
|
||
previewAccent: string
|
||
/** Outpost 浅色壳(纸白主区);legacy 深色为 false */
|
||
outpostShell?: boolean
|
||
vars: Record<string, string>
|
||
}
|
||
|
||
/** Outpost 浅色壳共用表面(纸白卡、深字、关 orb);各主题可覆盖 card/tint */
|
||
const OUTPOST_SHELL_VARS: Record<string, string> = {
|
||
'--mg-bg-card-rgb': '255, 254, 253',
|
||
'--mg-bg-card-hi-rgb': '251, 249, 253',
|
||
'--mg-bg-card-darker-rgb': '245, 240, 251',
|
||
'--mg-text-tint-rgb': '40, 33, 58',
|
||
'--mg-text-hi-rgb': '117, 109, 133',
|
||
'--mg-orb-a-opacity': '0',
|
||
'--mg-orb-b-opacity': '0',
|
||
'--mg-orb-c-opacity': '0',
|
||
'--mg-radius-sm': '10px',
|
||
'--mg-radius': '16px',
|
||
'--mg-radius-lg': '20px',
|
||
'--mg-radius-xl': '24px'
|
||
}
|
||
|
||
/**
|
||
* 地图编辑 chrome(顶栏/工具轨/属性栏/底栏)跟主题色相走。
|
||
* 默认真色壳(跟侧栏);浅色 Harbor 等可显式覆盖 --me-* 为浅壳。
|
||
* 画布始终保持深色。
|
||
*/
|
||
function withMapEditorChrome(vars: Record<string, string>): Record<string, string> {
|
||
const primaryRgb = vars['--mg-primary-rgb'] ?? '30, 58, 95'
|
||
const chrome1 = vars['--mg-bg-aside-1'] ?? '#1e3a5f'
|
||
const chrome2 = vars['--mg-bg-aside-2'] ?? '#0b1220'
|
||
const chromeRgb = vars['--mg-bg-aside-rgb'] ?? primaryRgb
|
||
const lightChrome = vars['--me-chrome-mode'] === 'light'
|
||
return {
|
||
...vars,
|
||
'--me-chrome-1': vars['--me-chrome-1'] ?? chrome1,
|
||
'--me-chrome-2': vars['--me-chrome-2'] ?? chrome2,
|
||
'--me-chrome-rgb': vars['--me-chrome-rgb'] ?? chromeRgb,
|
||
'--me-border': vars['--me-border'] ?? (lightChrome ? 'rgba(30, 58, 95, 0.12)' : 'rgba(255, 255, 255, 0.12)'),
|
||
'--me-text': vars['--me-text'] ?? (lightChrome ? 'rgba(11, 18, 32, 0.92)' : 'rgba(245, 242, 255, 0.94)'),
|
||
'--me-text-muted': vars['--me-text-muted'] ?? (lightChrome ? 'rgba(11, 18, 32, 0.55)' : 'rgba(210, 200, 235, 0.68)'),
|
||
'--me-surface': vars['--me-surface'] ?? (lightChrome ? 'rgba(30, 58, 95, 0.04)' : 'rgba(255, 255, 255, 0.05)'),
|
||
'--me-hover': vars['--me-hover'] ?? (lightChrome ? `rgba(${primaryRgb}, 0.08)` : `rgba(${primaryRgb}, 0.28)`),
|
||
'--me-active-glow': vars['--me-active-glow'] ?? `rgba(${primaryRgb}, 0.28)`,
|
||
'--me-card-bg': vars['--me-card-bg'] ?? (lightChrome ? 'rgba(255, 255, 255, 0.96)' : 'rgba(0, 0, 0, 0.22)'),
|
||
'--me-card-border': vars['--me-card-border'] ?? (lightChrome ? '#e2e6ec' : 'rgba(255, 255, 255, 0.08)'),
|
||
'--me-inset': vars['--me-inset'] ?? (lightChrome ? '#f4f6f8' : 'rgba(0, 0, 0, 0.28)')
|
||
}
|
||
}
|
||
|
||
function outpostPreset(
|
||
partial: Omit<ThemePreset, 'outpostShell' | 'vars'> & { vars: Record<string, string> }
|
||
): ThemePreset {
|
||
return {
|
||
...partial,
|
||
outpostShell: true,
|
||
vars: withMapEditorChrome({ ...OUTPOST_SHELL_VARS, ...partial.vars })
|
||
}
|
||
}
|
||
|
||
/** 默认:Outpost 浅色(对齐 fairylandtech.amerc.ai) */
|
||
export const DEFAULT_THEME_ID = 'outpost-light'
|
||
|
||
/** 主路径精选三色(顶栏 ThemeSwitcher) */
|
||
export const PRIMARY_THEMES: ThemePreset[] = [
|
||
outpostPreset({
|
||
id: 'outpost-light',
|
||
name: '浅色',
|
||
description: '纯白壳 + 紫色品牌点缀;地图壳白,画布深色',
|
||
preview: '#ffffff',
|
||
previewAccent: '#7c3aed',
|
||
vars: {
|
||
'--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',
|
||
'--mg-bg-app-1': '#ffffff',
|
||
'--mg-bg-app-2': '#ffffff',
|
||
'--mg-bg-app-3': '#ffffff',
|
||
'--mg-bg-app-deep-rgb': '255, 255, 255',
|
||
'--mg-bg-aside-1': '#ffffff',
|
||
'--mg-bg-aside-2': '#fafafa',
|
||
'--mg-bg-aside-rgb': '255, 255, 255',
|
||
'--mg-shadow-rgb': '76, 29, 149',
|
||
'--mg-bg-card-rgb': '255, 255, 255',
|
||
'--mg-bg-card-hi-rgb': '255, 255, 255',
|
||
'--mg-bg-card-darker-rgb': '248, 250, 252',
|
||
'--mg-text-tint-rgb': '45, 27, 105',
|
||
'--mg-text-hi-rgb': '109, 40, 217',
|
||
/* 地图编辑:纯白壳 */
|
||
'--me-chrome-mode': 'light',
|
||
'--me-chrome-1': '#ffffff',
|
||
'--me-chrome-2': '#ffffff',
|
||
'--me-chrome-rgb': '255, 255, 255',
|
||
'--me-border': 'rgba(124, 58, 237, 0.12)',
|
||
'--me-text': 'rgba(45, 27, 105, 0.92)',
|
||
'--me-text-muted': 'rgba(76, 29, 149, 0.55)',
|
||
'--me-surface': 'rgba(124, 58, 237, 0.04)',
|
||
'--me-hover': 'rgba(124, 58, 237, 0.08)',
|
||
'--me-active-glow': 'rgba(124, 58, 237, 0.18)',
|
||
'--me-card-bg': '#ffffff',
|
||
'--me-card-border': '#e5e7eb',
|
||
'--me-inset': '#f8fafc'
|
||
}
|
||
}),
|
||
outpostPreset({
|
||
id: 'outpost-purple',
|
||
name: '紫色',
|
||
description: '同壳层、更饱和紫品牌;侧栏深蓝紫',
|
||
preview: '#7c3aed',
|
||
previewAccent: '#a855f7',
|
||
vars: {
|
||
'--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',
|
||
'--mg-bg-app-1': '#f3eefc',
|
||
'--mg-bg-app-2': '#edeaf5',
|
||
'--mg-bg-app-3': '#f8f5ff',
|
||
'--mg-bg-app-deep-rgb': '243, 238, 252',
|
||
'--mg-bg-aside-1': '#2d1b69',
|
||
'--mg-bg-aside-2': '#1a1040',
|
||
'--mg-bg-aside-rgb': '45, 27, 105',
|
||
'--mg-shadow-rgb': '124, 58, 237'
|
||
}
|
||
}),
|
||
outpostPreset({
|
||
id: 'outpost-blue',
|
||
name: '蓝色',
|
||
description: '同壳层、蓝科技感;侧栏深蓝',
|
||
preview: '#3c78d2',
|
||
previewAccent: '#6ea8f0',
|
||
vars: {
|
||
'--mg-primary': '#3c78d2',
|
||
'--mg-primary-rgb': '60, 120, 210',
|
||
'--mg-primary-hover': '#4d8ae0',
|
||
'--mg-primary-hover-rgb': '77, 138, 224',
|
||
'--mg-primary-active': '#2a5fad',
|
||
'--mg-accent': '#6ea8f0',
|
||
'--mg-accent-rgb': '110, 168, 240',
|
||
'--mg-primary-light-3': '#6ea8f0',
|
||
'--mg-primary-light-5': '#9bc4f5',
|
||
'--mg-primary-light-7': '#c5ddf9',
|
||
'--mg-primary-light-8': '#e3effc',
|
||
'--mg-primary-light-9': '#f3f7fc',
|
||
'--mg-primary-dark-2': '#2a5fad',
|
||
'--mg-bg-app-1': '#f3f6fb',
|
||
'--mg-bg-app-2': '#eef2f8',
|
||
'--mg-bg-app-3': '#f8fafc',
|
||
'--mg-bg-app-deep-rgb': '243, 246, 251',
|
||
'--mg-bg-aside-1': '#0f2744',
|
||
'--mg-bg-aside-2': '#0a1a30',
|
||
'--mg-bg-aside-rgb': '15, 39, 68',
|
||
'--mg-shadow-rgb': '30, 58, 95'
|
||
}
|
||
})
|
||
]
|
||
|
||
/** 高级兼容:旧深色霓虹主题(用户菜单「兼容主题」) */
|
||
export const LEGACY_THEMES: ThemePreset[] = [
|
||
{
|
||
id: 'industrial-purple',
|
||
name: '星云紫',
|
||
description: '科幻紫主色 · 磨砂玻璃 · 霓虹辉光(兼容)',
|
||
preview: '#7c3aed',
|
||
previewAccent: '#c4b5fd',
|
||
outpostShell: false,
|
||
vars: {
|
||
'--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': '#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',
|
||
'--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',
|
||
outpostShell: false,
|
||
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',
|
||
outpostShell: false,
|
||
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',
|
||
outpostShell: false,
|
||
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',
|
||
outpostShell: false,
|
||
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',
|
||
outpostShell: false,
|
||
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 const THEMES: ThemePreset[] = [...PRIMARY_THEMES, ...LEGACY_THEMES]
|
||
|
||
/** 旧 id → 新精选 id */
|
||
const THEME_ALIASES: Record<string, string> = {
|
||
'fame-lavender': 'outpost-purple',
|
||
'outpost-fairyland': 'outpost-light'
|
||
}
|
||
|
||
export function resolveThemeId(id: string | undefined | null): string {
|
||
if (!id) return DEFAULT_THEME_ID
|
||
const aliased = THEME_ALIASES[id] ?? id
|
||
if (THEMES.some((t) => t.id === aliased)) return aliased
|
||
return DEFAULT_THEME_ID
|
||
}
|
||
|
||
export function findTheme(id: string | undefined | null): ThemePreset {
|
||
const resolved = resolveThemeId(id)
|
||
return THEMES.find((t) => t.id === resolved) ?? PRIMARY_THEMES[0]
|
||
}
|
||
|
||
export function isLegacyThemeId(id: string | undefined | null): boolean {
|
||
if (!id) return false
|
||
const resolved = THEME_ALIASES[id] ?? id
|
||
return LEGACY_THEMES.some((t) => t.id === resolved)
|
||
}
|
||
|
||
/** 把主题变量写入 :root;Outpost 壳写 data-shell="outpost" 供浅色 CSS 命中 */
|
||
export function applyThemeVars(preset: ThemePreset): void {
|
||
const root = document.documentElement
|
||
// preset.vars 在 outpostPreset 里已跑过 withMapEditorChrome;再跑一次以补全缺省 --me-*
|
||
const vars = withMapEditorChrome({ ...preset.vars })
|
||
for (const [key, value] of Object.entries(vars)) {
|
||
if (key === '--me-chrome-mode') continue
|
||
root.style.setProperty(key, value)
|
||
}
|
||
root.setAttribute('data-theme', preset.id)
|
||
if (preset.outpostShell) {
|
||
root.setAttribute('data-shell', 'outpost')
|
||
} else {
|
||
root.removeAttribute('data-shell')
|
||
}
|
||
}
|