颜色主题

dist/assets/index-8AslhRLR.css

@@ -0,0 +1 @@
+.language-picker[data-v-8f4f7614]{display:flex;height:28px;align-items:center;gap:6px;margin-left:auto;color:var(--ui-text-body);font-size:11px;white-space:nowrap}.language-dropdown[data-v-8f4f7614]{position:relative}.language-trigger[data-v-8f4f7614]{display:flex;height:28px;min-width:88px;align-items:center;gap:7px;padding:0 8px;border:1px solid var(--ui-border-button);border-radius:6px;outline:none;background:var(--ui-button-surface);color:var(--ui-text-strong);font:inherit;font-size:11px;cursor:pointer}.language-trigger[data-v-8f4f7614]:hover,.language-trigger.open[data-v-8f4f7614]{border-color:var(--ui-accent-strong);background:var(--ui-control-active)}.language-trigger[data-v-8f4f7614]:focus-visible{border-color:var(--ui-accent-strong)}.language-flag-icon[data-v-8f4f7614],.language-option-flag-icon[data-v-8f4f7614]{display:block;width:22px;height:15px;flex:0 0 auto;overflow:hidden;border-radius:2px;box-shadow:0 0 0 1px #ffffff1f}.language-short[data-v-8f4f7614]{min-width:20px;color:var(--ui-text-strong);font-size:11px;font-weight:600}.language-chevron[data-v-8f4f7614]{width:10px;height:6px;margin-left:auto;fill:none;stroke:var(--ui-text);stroke-width:1.7;transition:transform .15s ease}.language-trigger.open .language-chevron[data-v-8f4f7614]{transform:rotate(180deg)}.language-menu[data-v-8f4f7614]{position:absolute;right:0;bottom:calc(100% + 6px);z-index:30;width:190px;max-height:min(360px,calc(100vh - 120px));overflow-y:auto;padding:5px;border:1px solid var(--ui-border-control);border-radius:9px;background:var(--ui-popover-bg);box-shadow:0 8px 24px #0000007a}.menu-down .language-menu[data-v-8f4f7614]{top:calc(100% + 6px);bottom:auto}.language-option[data-v-8f4f7614]{display:grid;width:100%;min-height:38px;grid-template-columns:24px 1fr 16px;align-items:center;gap:8px;padding:0 7px;border:0;border-radius:6px;background:transparent;color:var(--ui-text-body);font:inherit;font-size:12px;text-align:left;white-space:nowrap;cursor:pointer}.language-option[data-v-8f4f7614]:hover,.language-option[data-v-8f4f7614]:focus-visible{outline:none;background:var(--ui-control-active);color:#fff}.language-option.selected[data-v-8f4f7614]{background:var(--ui-accent-soft-bg);color:#fff}.language-check[data-v-8f4f7614]{justify-self:end;color:#fff;font-size:18px;font-weight:500}.welcome-shell[data-v-d3581500]{--u: max(1px, calc(100vw / 1920));position:fixed;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;overflow:hidden;box-sizing:border-box;padding:clamp(22px,3vw,calc(42 * var(--u))) clamp(22px,4vw,calc(64 * var(--u))) calc(28 * var(--u));color:#eef0f5;background:radial-gradient(circle at 17% 0%,rgba(218,45,57,.16),transparent 32%),radial-gradient(circle at 85% 8%,rgba(72,100,170,.16),transparent 30%),linear-gradient(145deg,#09090d,#0d0f15 52%,#090b10);font-family:system-ui,-apple-system,Segoe UI,sans-serif}.welcome-shell[data-v-d3581500]:before{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;content:"";opacity:.22;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:calc(42 * var(--u)) calc(42 * var(--u));-webkit-mask-image:linear-gradient(to bottom,#000,transparent 70%);mask-image:linear-gradient(to bottom,#000,transparent 70%)}.welcome-header[data-v-d3581500],.welcome-intro[data-v-d3581500],.hub-grid[data-v-d3581500]{position:relative}.welcome-header[data-v-d3581500]{display:flex;min-height:calc(42 * var(--u));align-items:center;gap:calc(18 * var(--u))}.welcome-header[data-v-d3581500]{z-index:40}.brand-link[data-v-d3581500]{display:inline-flex;border-radius:6px;transition:opacity .16s ease}.brand-link[data-v-d3581500]:hover{opacity:.78}.brand-link[data-v-d3581500]:focus-visible{outline:2px solid #ef5147;outline-offset:5px}.brand-logo[data-v-d3581500]{display:block;width:clamp(128px,10vw,calc(156 * var(--u)));height:auto}.welcome-intro[data-v-d3581500]{padding:clamp(34px,6vh,calc(64 * var(--u))) 0 clamp(22px,3.5vh,calc(34 * var(--u)));text-align:center}.welcome-intro h1[data-v-d3581500]{max-width:none;margin:0 auto;color:#f3f3f5;font-size:clamp(20px,2.4vw,calc(40 * var(--u)));line-height:1.1;letter-spacing:-.025em;white-space:nowrap}.welcome-intro h1 span[data-v-d3581500]{color:#ff4e47}.welcome-intro p[data-v-d3581500]{max-width:390px;margin:0 0 3px;color:#8c93a3;font-size:13px;line-height:1.75}.hub-grid[data-v-d3581500]{display:grid;min-height:0;flex:0 1 auto;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.5vw,calc(22 * var(--u)));width:min(100%,calc(1540 * var(--u)));margin:0 auto}.hub-card[data-v-d3581500]{--hub-border: #242731;--hub-divider: #242731;position:relative;display:flex;min-width:0;min-height:0;flex-direction:column;padding:0;overflow:hidden;border:1px solid var(--hub-border);border-radius:calc(18 * var(--u));background:linear-gradient(180deg,#1a1d26f0,#0f1117fa);color:inherit;font:inherit;text-align:left;text-decoration:none;cursor:pointer;box-shadow:0Line truncated

dist/assets/index-BO34Whit.js

@@ -0,0 +1 @@
+const _0x14d567=_0x5ea5;(function(_0x26a8e8,_0x417782){const _0x521f6b=_0x5ea5,_0x384f06=_0x26a8e8();while(!![]){try{const _0x188985=-parseInt(_0x521f6b(0x463d))/0x1+parseInt(_0x521f6b(0x3864))/0x2*(-parseInt(_0x521f6b(0x3ac9))/0x3)+-parseInt(_0x521f6b(0x2aa9))/0x4+-parseInt(_0x521f6b(0x2468))/0x5*(parseInt(_0x521f6b(0x449))/0x6)+parseInt(_0x521f6b(0x2d52))/0x7+parseInt(_0x521f6b(0xc52))/0x8*(-parseInt(_0x521f6b(0x2ceb))/0x9)+-parseInt(_0x521f6b(0x549e))/0xa*(-parseInt(_0x521f6b(0x2af4))/0xb);if(_0x188985===_0x417782)break;else _0x384f06['push'](_0x384f06['shift']());}catch(_0x55f257){_0x384f06['push'](_0x384f06['shift']());}}}(_0x1fbe,0x7e4e8));var zs=Object[_0x14d567(0x4fab)+_0x14d567(0x3ba0)],Vs=(_0x5e0a7a,_0xba4907,_0x527ec4)=>_0xba4907 in _0x5e0a7a?zs(_0x5e0a7a,_0xba4907,{'enumerable':!0x0,'configurable':!0x0,'writable':!0x0,'value':_0x527ec4}):_0x5e0a7a[_0xba4907]=_0x527ec4,Ae=(_0x5cb859,_0x3b9c29,_0x4836a5)=>Vs(_0x5cb859,typeof _0x3b9c29!=_0x14d567(0x1d9)?_0x3b9c29+'':_0x3b9c29,_0x4836a5);import{c as _0xff20a2,d as _0x2e0352,u as _0x56702f,o as _0x14f5b1,a as _0x285715,b as _0x10ddfe,e as _0x39c1c4,w as _0x485ec1,f as _0x439077,n as _0x35e7fa,g as _0x450f15,t as _0x58b3ae,h as _0x372f12,F as _0x361562,r as _0x2f7271,i as _0x2aa5f6,j as _0x45cb5c,k as _0x57e9d4,l as _0x48ec50,m as _0xbd11d5,p as _0x52714f,q as _0x136288,s as _0xeb36b9,v as _0x17964c,T as _0x5c4bdf,x as _0x55966c,y as _0x3ce881,z as _0x11d8c2,S as _0x52b72a,C as _0x6672e8,G as _0x2fce74,A as _0x29c621,B as _0x1b7ac0,D as _0x41a763,M as _0x3ba3ad,E as _0x431c83,H as _0x3deb1d,I as _0x19bff7,J as _0x39919c,K as _0x2faae6,L as _0x4553d8,N as _0x19553f,O as _0x2ef30a,P as _0x38a53c,Q as _0x2ac1d6,R as _0x439b80,U as _0x451a87,V as _0x31770d,W as _0x44e92f,X as _0xe69c86,Y as _0x4209d9,Z as _0x2abd3e,_ as _0x2250fa,$ as _0x441443,a0 as _0x5f5c51,a1 as _0x1aa9bd,a2 as _0x272d7e,a3 as _0x570854,a4 as _0x4045e2,a5 as _0x3f6e33,a6 as _0x270cfd,a7 as _0x28d9c5,a8 as _0x1ae519,a9 as _0x5626a,aa as _0x1f9ec7,ab as _0x5d9195,ac as _0x5e3166,ad as _0x5b5ba2,ae as _0x4e53ab,af as _0x41f2e0,ag as _0x47b679,ah as _0x42f585,ai as _0x23e67c,aj as _0x1ef2ca}from'./vendor-D7JxX6Ig.js';(function(){const _0x518ca8=_0x14d567,_0xef2009=document[_0x518ca8(0x4ac7)+_0x518ca8(0x3f3e)](_0x518ca8(0x2f76))[_0x518ca8(0x1e6e)];if(_0xef2009&&_0xef2009['supports']&&_0xef2009[_0x518ca8(0x55a)](_0x518ca8(0x41d4)+_0x518ca8(0x27a7)))return;for(const _0x12a0c7 of document[_0x518ca8(0xc9)+_0x518ca8(0x3227)](_0x518ca8(0x1859)+_0x518ca8(0x5166)+'preload\x22'+']'))_0x471a94(_0x12a0c7);new MutationObserver(_0x54ab3a=>{const _0x3ff984=_0x518ca8;for(const _0x3a0154 of _0x54ab3a)if(_0x3a0154[_0x3ff984(0x1686)]===_0x3ff984(0x2513)+'t'){for(const _0x4963e6 of _0x3a0154[_0x3ff984(0x398d)+'es'])_0x4963e6[_0x3ff984(0x2720)]===_0x3ff984(0x2c8f)&&_0x4963e6[_0x3ff984(0x5e8)]===_0x3ff984(0x41d4)+'eload'&&_0x471a94(_0x4963e6);}})['observe'](document,{'childList':!0x0,'subtree':!0x0});function _0x563693(_0x1cfb0a){const _0x5b970f=_0x518ca8,_0x46160a={};return _0x1cfb0a[_0x5b970f(0x50a6)+'y']&&(_0x46160a[_0x5b970f(0x50a6)+'y']=_0x1cfb0a[_0x5b970f(0x50a6)+'y']),_0x1cfb0a[_0x5b970f(0x2bb0)+_0x5b970f(0x168b)]&&(_0x46160a[_0x5b970f(0x2bb0)+'Policy']=_0x1cfb0a[_0x5b970f(0x2bb0)+_0x5b970f(0x168b)]),_0x1cfb0a['crossOri'+_0x5b970f(0x406d)]===_0x5b970f(0x5188)+_0x5b970f(0x1e9e)?_0x46160a[_0x5b970f(0xf2)+'als']=_0x5b970f(0x12c5):_0x1cfb0a[_0x5b970f(0x1028)+'gin']===_0x5b970f(0x5189)+'s'?_0x46160a[_0x5b970f(0xf2)+_0x5b970f(0x3b88)]=_0x5b970f(0x418b):_0x46160a['credenti'+'als']=_0x5b970f(0x2a07)+'gin',_0x46160a;}function _0x471a94(_0x3b19df){const _0x404a00=_0x518ca8;if(_0x3b19df['ep'])return;_0x3b19df['ep']=!0x0;const _0x256c70=_0x563693(_0x3b19df);fetch(_0x3b19df[_0x404a00(0x1d9f)],_0x256c70);}}());const pa=_0x14d567(0x53eb)+_0x14d567(0x32de)+'atermark'+_0x14d567(0x5547),gr='/favicon'+_0x14d567(0x5547),di=_0x14d567(0x53eb)+'eagle-lo'+_0x14d567(0x406f),vr={'resizeTimeline':_0x14d567(0x206)+_0x14d567(0x1f0a)+_0x14d567(0x49b5)+_0x14d567(0x3fe3)+_0x14d567(0xa7d)+_0x14d567(0x2665)+'n','systems':'System','particlesBones':_0x14d567(0xac0)+_0x14d567(0x3bec)+'n)','rootBone':'Wurzelkn'+_0x14d567(0x4bff),'hudTip':_0x14d567(0xc81)+_0x14d567(0x1da2)+_0x14d567(0xa47)+'t\x20der\x20li'+'nken\x20Mau'+_0x14d567(0x1ba1)+_0x14d567(0x40ba)+_0x14d567(0x307d)+_0x14d567(0x39d5)+'n','title':_0x14d567(0xc3f)+_0x14d567(0x3c03)+_0x14d567(0x15d)},br={'documentTitle':_0x14d567(0xc3f)+_0x14d567(0x3c03)+_0x14d567(0x15d),'titleLead':'Von\x20Spin'+_0x14d567(0x563f)+'eln','titleAccent':_0x14d567(0x42c8)+_0x14d567(0x39ca)+'olchain','backToTools':_0x14d567(0x881)+_0x14d567(0x3e1e)+_0x14d567(0x1a3a)+'hl','editor':{'badge':_0x14d567(0x1ae3)+_0x14d567(0xe0c),'title':'Partikel'+_0x14d567(0x2db7),'description':_0x14d567(0x574d)+_0x14d567(0xf6d)+_0x14d567(0x6a9)+_0x14d567(0x24e6)+_0x14d567(0x3a5e)+_0x14d567(0x435c)+_0x14d567(0xf6d)+_0x14d567(0x4b64)+_0x14d567(0x1df3)+'ei.','tagPreview':'Live-Vor'+_0x14d567(0x2047),'tagSequence':_0x14d567(0x4b8c)+Line truncated

dist/assets/index-CllsrP2l.js

@@ -1 +0,0 @@
-const _0x5b5487=_0x2be6;(function(_0x1ffe55,_0x443b15){const _0x2f8aea=_0x2be6,_0x4fccab=_0x1ffe55();while(!![]){try{const _0x4788ae=-parseInt(_0x2f8aea(0x2388))/0x1+parseInt(_0x2f8aea(0x2830))/0x2*(parseInt(_0x2f8aea(0x404a))/0x3)+-parseInt(_0x2f8aea(0x2655))/0x4+parseInt(_0x2f8aea(0x2bfd))/0x5+parseInt(_0x2f8aea(0x428))/0x6+parseInt(_0x2f8aea(0x354c))/0x7*(-parseInt(_0x2f8aea(0x46f9))/0x8)+-parseInt(_0x2f8aea(0xe78))/0x9*(-parseInt(_0x2f8aea(0x4ac1))/0xa);if(_0x4788ae===_0x443b15)break;else _0x4fccab['push'](_0x4fccab['shift']());}catch(_0x2d07b4){_0x4fccab['push'](_0x4fccab['shift']());}}}(_0x54a0,0xe07bc));var zs=Object[_0x5b5487(0x1caf)+'operty'],Vs=(_0x548579,_0x106cf1,_0x120657)=>_0x106cf1 in _0x548579?zs(_0x548579,_0x106cf1,{'enumerable':!0x0,'configurable':!0x0,'writable':!0x0,'value':_0x120657}):_0x548579[_0x106cf1]=_0x120657,Pe=(_0xf82bad,_0x5619d1,_0x248dea)=>Vs(_0xf82bad,typeof _0x5619d1!='symbol'?_0x5619d1+'':_0x5619d1,_0x248dea);import{c as _0x5be76f,d as _0x3663f1,u as _0x1f5115,o as _0x4564c2,a as _0x3ef74d,b as _0x17434d,e as _0xcf4707,w as _0x590c29,f as _0xb3104f,n as _0x2a769d,g as _0xe2607b,t as _0x290763,h as _0x2858ac,F as _0x45e292,r as _0x2d6a2f,i as _0x44121b,j as _0x298398,k as _0x5cab3b,l as _0x9e5ebc,m as _0x13d608,p as _0x3cab03,q as _0x3f59d0,s as _0x3505f1,v as _0x4a3944,T as _0x279e38,x as _0x39e5bd,y as _0x3497d9,z as _0x8d0b75,S as _0x30fac7,C as _0x286867,G as _0x281086,A as _0x49be8d,B as _0xdb0e74,D as _0x49a393,M as _0x1a1a0e,E as _0x18a26e,H as _0x583049,I as _0x34a922,J as _0xb069c6,K as _0x18d534,L as _0x4d3bc7,N as _0x5cb563,O as _0x229825,P as _0x182a85,Q as _0x4624ed,R as _0xfa8dea,U as _0x320a13,V as _0x3203ed,W as _0x49e168,X as _0x5bba5d,Y as _0x419840,Z as _0x1905b5,_ as _0x41b8d6,$ as _0x2bbcbe,a0 as _0x51b021,a1 as _0xad5439,a2 as _0x2f3250,a3 as _0x50cf31,a4 as _0x3cb19b,a5 as _0x25c666,a6 as _0x30aa6b,a7 as _0xab9abf,a8 as _0x1ea0a8,a9 as _0x58eaa3,aa as _0x4ce40c,ab as _0x49b726,ac as _0x52c2e8,ad as _0x16b8fc,ae as _0x137ea6,af as _0x18e055,ag as _0x3a0d35,ah as _0x217c9c,ai as _0x314aeb,aj as _0x51a70f}from'./vendor-B3PIHsJG.js';(function(){const _0x2f9961=_0x5b5487,_0x57d4f7=document['createEl'+_0x2f9961(0x4307)]('link')[_0x2f9961(0x4ad9)];if(_0x57d4f7&&_0x57d4f7[_0x2f9961(0x5559)]&&_0x57d4f7['supports']('modulepr'+_0x2f9961(0x2d5e)))return;for(const _0xcaaea9 of document['querySel'+_0x2f9961(0x259)](_0x2f9961(0x33d5)+_0x2f9961(0x16d8)+_0x2f9961(0x6e0)+']'))_0x131264(_0xcaaea9);new MutationObserver(_0x39d2d9=>{const _0x451854=_0x2f9961;for(const _0x37e09c of _0x39d2d9)if(_0x37e09c[_0x451854(0x14ed)]==='childLis'+'t'){for(const _0x3da29d of _0x37e09c[_0x451854(0x3c74)+'es'])_0x3da29d[_0x451854(0x406e)]==='LINK'&&_0x3da29d[_0x451854(0x2c3a)]===_0x451854(0x2700)+_0x451854(0x2d5e)&&_0x131264(_0x3da29d);}})[_0x2f9961(0x3711)](document,{'childList':!0x0,'subtree':!0x0});function _0x258bc6(_0x19842c){const _0x655de0=_0x2f9961,_0x3f78b2={};return _0x19842c['integrit'+'y']&&(_0x3f78b2[_0x655de0(0x1e4)+'y']=_0x19842c['integrit'+'y']),_0x19842c[_0x655de0(0x2d10)+'Policy']&&(_0x3f78b2['referrer'+_0x655de0(0x4f3c)]=_0x19842c[_0x655de0(0x2d10)+_0x655de0(0x4f3c)]),_0x19842c['crossOri'+_0x655de0(0x311c)]==='use-cred'+_0x655de0(0x2087)?_0x3f78b2[_0x655de0(0x4b7f)+_0x655de0(0x333)]='include':_0x19842c[_0x655de0(0x245f)+_0x655de0(0x311c)]===_0x655de0(0x41c1)+'s'?_0x3f78b2[_0x655de0(0x4b7f)+_0x655de0(0x333)]=_0x655de0(0x4055):_0x3f78b2[_0x655de0(0x4b7f)+_0x655de0(0x333)]=_0x655de0(0x26a1)+_0x655de0(0x311c),_0x3f78b2;}function _0x131264(_0x5e9c9c){const _0x1bc9df=_0x2f9961;if(_0x5e9c9c['ep'])return;_0x5e9c9c['ep']=!0x0;const _0x5891b1=_0x258bc6(_0x5e9c9c);fetch(_0x5e9c9c[_0x1bc9df(0x40ab)],_0x5891b1);}}());const da=_0x5b5487(0x22d5)+_0x5b5487(0x1ac1)+_0x5b5487(0x1ed)+_0x5b5487(0x4ba),gr=_0x5b5487(0x3042)+_0x5b5487(0x4ba),li=_0x5b5487(0x22d5)+_0x5b5487(0xcef)+_0x5b5487(0x1182),vr={'resizeTimeline':'Ziehen\x20S'+_0x5b5487(0x5855)+'ie\x20Höhe\x20'+'der\x20Zeit'+_0x5b5487(0x492e)+_0x5b5487(0x141e)+'n','systems':_0x5b5487(0x2f0b),'particlesBones':_0x5b5487(0x289e)+_0x5b5487(0x13f0)+'n)','rootBone':'Wurzelkn'+_0x5b5487(0x125f),'hudTip':'Radzoom\x20'+'·\x20Klicke'+_0x5b5487(0x3df3)+_0x5b5487(0x9c0)+_0x5b5487(0x1cd3)+'staste,\x20'+_0x5b5487(0x135a)+_0x5b5487(0x1192)+_0x5b5487(0x20cc)+'n','title':'Spine-Pa'+_0x5b5487(0x6fc)+'itor'},br={'documentTitle':_0x5b5487(0x2de3)+'rtikeled'+_0x5b5487(0x3072),'titleLead':_0x5b5487(0x1226)+_0x5b5487(0x42f5)+_0x5b5487(0x30c4),'titleAccent':_0x5b5487(0x5813)+_0x5b5487(0x36d)+'olchain','backToTools':'Zurück\x20z'+_0x5b5487(0x2968)+'eugauswa'+'hl','editor':{'badge':_0x5b5487(0xed3)+_0x5b5487(0x1792),'title':_0x5b5487(0x289e)+_0x5b5487(0x556f),'description':_0x5b5487(0x49a5)+_0x5b5487(0x1aa1)+_0x5b5487(0x3401)+_0x5b5487(0x393d)+_0x5b5487(0x3d58)+'SON-\x20und'+_0x5b5487(0x1aa1)+_0x5b5487(0x133e)+_0x5b5487(0x4c72)+_0x5b5487(0x40d3),'tagPreview':'Live-Vor'+'schau','tagSequence':'Spine-Pr'+_0x5b5487(0x2443)+_0x5b5487(0x1d44),'tagExport':'JSON-Exp'Line truncated

dist/assets/index-DCGuJBRC.css

@@ -1 +0,0 @@
-.language-picker[data-v-811a66dc]{display:flex;height:28px;align-items:center;gap:6px;margin-left:auto;color:#9aa8c1;font-size:11px;white-space:nowrap}.language-dropdown[data-v-811a66dc]{position:relative}.language-trigger[data-v-811a66dc]{display:flex;height:28px;min-width:88px;align-items:center;gap:7px;padding:0 8px;border:1px solid #3a4963;border-radius:6px;outline:none;background:#202a3b;color:#dbe4f5;font:inherit;font-size:11px;cursor:pointer}.language-trigger[data-v-811a66dc]:hover,.language-trigger.open[data-v-811a66dc]{border-color:#5b608c;background:#2b3a5c}.language-trigger[data-v-811a66dc]:focus-visible{border-color:#7774ff}.language-flag-icon[data-v-811a66dc],.language-option-flag-icon[data-v-811a66dc]{display:block;width:22px;height:15px;flex:0 0 auto;overflow:hidden;border-radius:2px;box-shadow:0 0 0 1px #ffffff1f}.language-short[data-v-811a66dc]{min-width:20px;color:#dbe4f5;font-size:11px;font-weight:600}.language-chevron[data-v-811a66dc]{width:10px;height:6px;margin-left:auto;fill:none;stroke:#aab;stroke-width:1.7;transition:transform .15s ease}.language-trigger.open .language-chevron[data-v-811a66dc]{transform:rotate(180deg)}.language-menu[data-v-811a66dc]{position:absolute;right:0;bottom:calc(100% + 6px);z-index:30;width:190px;max-height:min(360px,calc(100vh - 120px));overflow-y:auto;padding:5px;border:1px solid #343b50;border-radius:9px;background:#141420fa;box-shadow:0 8px 24px #0000007a}.menu-down .language-menu[data-v-811a66dc]{top:calc(100% + 6px);bottom:auto}.language-option[data-v-811a66dc]{display:grid;width:100%;min-height:38px;grid-template-columns:24px 1fr 16px;align-items:center;gap:8px;padding:0 7px;border:0;border-radius:6px;background:transparent;color:#aeb8cc;font:inherit;font-size:12px;text-align:left;white-space:nowrap;cursor:pointer}.language-option[data-v-811a66dc]:hover,.language-option[data-v-811a66dc]:focus-visible{outline:none;background:#2b3a5c;color:#fff}.language-option.selected[data-v-811a66dc]{background:#343b63;color:#fff}.language-check[data-v-811a66dc]{justify-self:end;color:#fff;font-size:18px;font-weight:500}.welcome-shell[data-v-d3581500]{--u: max(1px, calc(100vw / 1920));position:fixed;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;overflow:hidden;box-sizing:border-box;padding:clamp(22px,3vw,calc(42 * var(--u))) clamp(22px,4vw,calc(64 * var(--u))) calc(28 * var(--u));color:#eef0f5;background:radial-gradient(circle at 17% 0%,rgba(218,45,57,.16),transparent 32%),radial-gradient(circle at 85% 8%,rgba(72,100,170,.16),transparent 30%),linear-gradient(145deg,#09090d,#0d0f15 52%,#090b10);font-family:system-ui,-apple-system,Segoe UI,sans-serif}.welcome-shell[data-v-d3581500]:before{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;content:"";opacity:.22;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:calc(42 * var(--u)) calc(42 * var(--u));-webkit-mask-image:linear-gradient(to bottom,#000,transparent 70%);mask-image:linear-gradient(to bottom,#000,transparent 70%)}.welcome-header[data-v-d3581500],.welcome-intro[data-v-d3581500],.hub-grid[data-v-d3581500]{position:relative}.welcome-header[data-v-d3581500]{display:flex;min-height:calc(42 * var(--u));align-items:center;gap:calc(18 * var(--u))}.welcome-header[data-v-d3581500]{z-index:40}.brand-link[data-v-d3581500]{display:inline-flex;border-radius:6px;transition:opacity .16s ease}.brand-link[data-v-d3581500]:hover{opacity:.78}.brand-link[data-v-d3581500]:focus-visible{outline:2px solid #ef5147;outline-offset:5px}.brand-logo[data-v-d3581500]{display:block;width:clamp(128px,10vw,calc(156 * var(--u)));height:auto}.welcome-intro[data-v-d3581500]{padding:clamp(34px,6vh,calc(64 * var(--u))) 0 clamp(22px,3.5vh,calc(34 * var(--u)));text-align:center}.welcome-intro h1[data-v-d3581500]{max-width:none;margin:0 auto;color:#f3f3f5;font-size:clamp(20px,2.4vw,calc(40 * var(--u)));line-height:1.1;letter-spacing:-.025em;white-space:nowrap}.welcome-intro h1 span[data-v-d3581500]{color:#ff4e47}.welcome-intro p[data-v-d3581500]{max-width:390px;margin:0 0 3px;color:#8c93a3;font-size:13px;line-height:1.75}.hub-grid[data-v-d3581500]{display:grid;min-height:0;flex:0 1 auto;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.5vw,calc(22 * var(--u)));width:min(100%,calc(1540 * var(--u)));margin:0 auto}.hub-card[data-v-d3581500]{--hub-border: #242731;--hub-divider: #242731;position:relative;display:flex;min-width:0;min-height:0;flex-direction:column;padding:0;overflow:hidden;border:1px solid var(--hub-border);border-radius:calc(18 * var(--u));background:linear-gradient(180deg,#1a1d26f0,#0f1117fa);color:inherit;font:inherit;text-align:left;text-decoration:none;cursor:pointer;box-shadow:0 20px 52px #00000040;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}.hub-card[data-v-d3581500]:hover{transform:translateY(-3px);border-color:var(--hub-border);box-shadow:0 25px 6Line truncated

dist/assets/vendor-D7JxX6Ig.js

@@ -1324,4 +1324,4 @@ void main(void){
     gl_FragColor.a = color.a * vColor.a;
     gl_FragColor.rgb = ((color.a - 1.0) * vDarkColor.a + 1.0 - color.rgb) * vDarkColor.rgb + color.rgb * vColor.rgb;
 }
-`;class yg extends li{constructor(t){super(t),this.shaderGenerator=new Up(mL,pL),this.geometryClass=Vw,this.vertexSize=7}packInterleavedGeometry(t,e,s,r,n){const{uint32View:a,float32View:o}=e,h=r/this.vertexSize,l=t.uvs,c=t.indices,u=t.vertexData,d=t._texture.baseTexture._batchLocation,f=Math.min(t.worldAlpha,1),m=Wt.shared.setValue(t._tintRGB).toPremultiplied(f,!0),p=Wt.shared.setValue(t._darkTintRGB).premultiply(f,!0).toPremultiplied(1,!1);for(let g=0;g<u.length;g+=2)o[r++]=u[g],o[r++]=u[g+1],o[r++]=l[g],o[r++]=l[g+1],a[r++]=m,a[r++]=p,o[r++]=d;for(let g=0;g<c.length;g++)s[n++]=h+c[g]}}x(yg,"extension",{name:"darkTintBatch",type:gt.RendererPlugin});St.add(yg);const ai=class ai extends zn{constructor(){const e=new Qc;e.getBuffer("aVertexPosition").static=!1,e.getBuffer("aTextureCoord").static=!1;const s=new il(Ot.EMPTY);super(e,s);x(this,"name","");x(this,"warnedTwoTint",!1)}updateFromSpineData(e,s,r,n,a,o,h,l){var y,_;this.texture=e.texture;const c=a/(l?12:8)*2,u=this.geometry.getBuffer("aTextureCoord");((y=u.data)==null?void 0:y.length)!==c&&(u.data=new Float32Array(c));const d=this.geometry.getBuffer("aVertexPosition");((_=d.data)==null?void 0:_.length)!==c&&(d.data=new Float32Array(c));let f=0;const m=u.data,p=d.data;for(let v=0;v<a;v+=l?12:8){let b=v;p[f]=n[b++],p[f+1]=n[b++],b+=4,m[f]=n[b++],m[f+1]=n[b++],f+=2}l&&!this.warnedTwoTint&&(console.warn("DarkTint is not enabled by default. To enable use a DarkSlotMesh factory while creating the Spine object."),this.warnedTwoTint=!0),ai.auxColor[0]=n[2],ai.auxColor[1]=n[3],ai.auxColor[2]=n[4],ai.auxColor[3]=n[5],this.tint=ai.auxColor,this.alpha=ai.auxColor[3],this.blendMode=qn.toPixiBlending(s);const g=this.geometry.indexBuffer;if(g.data.length!==o.length)g.data=new Uint32Array(o);else{const v=g.data;for(let b=0;b<h;b++)v[b]=o[b]}this.name=r,u.update(),d.update(),g.update()}};x(ai,"auxColor",[0,0,0,0]);let bc=ai;class gL{constructor(t,e,s,r){x(this,"x");x(this,"y");x(this,"width");x(this,"height");this.x=t,this.y=e,this.width=s,this.height=r}calculateBounds(){return{x:this.x,y:this.y,width:this.width,height:this.height}}}class yL{constructor(t=!1){x(this,"clipping");this.clipping=t}calculateBounds(t){if(!t.skeleton)return{x:0,y:0,width:0,height:0};const e=new Mi(t.skeleton.data);e.setupPose(),e.updateWorldTransform(Os.update);const s=e.getBoundsRect(this.clipping?new ao:void 0);return s.width===Number.NEGATIVE_INFINITY?{x:0,y:0,width:0,height:0}:s}}class xL{constructor(t,e=[],s=.05,r=!1){x(this,"animation");x(this,"skins");x(this,"timeStep");x(this,"clipping");this.animation=t,this.skins=e,this.timeStep=s,this.clipping=r}calculateBounds(t){if(!t.skeleton||!t.state)return{x:0,y:0,width:0,height:0};const e=new Ka(t.state.data),s=new Mi(t.skeleton.data),r=this.clipping?new ao:void 0,n=s.data;if(this.skins.length>0){const o=new Za("custom-skin");for(const h of this.skins){const l=n.findSkin(h);l!=null&&o.addSkin(l)}s.setSkin(o)}s.setupPose();const a=this.animation!=null?n.findAnimation(this.animation):null;if(a==null){s.updateWorldTransform(Os.update);const o=s.getBoundsRect(r);return o.width===Number.NEGATIVE_INFINITY?{x:0,y:0,width:0,height:0}:o}else{let o=Number.POSITIVE_INFINITY,h=Number.POSITIVE_INFINITY,l=Number.NEGATIVE_INFINITY,c=Number.NEGATIVE_INFINITY;e.clearTracks(),e.setAnimation(0,a,!1);const u=Math.max(a.duration/this.timeStep,1);for(let f=0;f<u;f++){const m=f>0?this.timeStep:0;e.update(m),e.apply(s),s.update(m),s.updateWorldTransform(Os.update);const p=s.getBoundsRect(r);o=Math.min(o,p.x),h=Math.min(h,p.y),l=Math.max(l,p.x+p.width),c=Math.max(c,p.y+p.height)}const d={x:o,y:h,width:l-o,height:c-h};return d.width===Number.NEGATIVE_INFINITY?{x:0,y:0,width:0,height:0}:d}}}const $t=class $t extends fs{constructor(e){super();x(this,"skeleton");x(this,"state");x(this,"skeletonPhysics");x(this,"darkTint",!1);x(this,"hasNeverUpdated",!0);x(this,"_debug");x(this,"slotMeshFactory",()=>new bc);x(this,"beforeUpdateWorldTransforms",()=>{});x(this,"afterUpdateWorldTransforms",()=>{});x(this,"_autoUpdate",!1);x(this,"_ticker",ss.shared);x(this,"meshesCache",new Map);x(this,"lightColor",new Ft);x(this,"darkColor",new Ft);x(this,"clippingVertAux",new Float32Array(6));x(this,"_boundsProvider");x(this,"_boundsPoint",new zt);x(this,"_boundsSpineID",-1);x(this,"_boundsSpineDirty",!0);x(this,"slotsObject",new Map);x(this,"verticesCache",bt.newFloatArray(1024));x(this,"clippingSlotToPixiMasks",{});e instanceof Dl?e={skeletonData:e}:"skeleton"in e&&(e=new.target.createOptions(e));const{autoUpdate:s=!0,boundsProvider:r,darkTint:n,skeletonData:a,ticker:o}=e;this.skeleton=new Mi(a),this.skeletonPhysics=new gg(this.skeleton,{readTransform:(h,l)=>this.readPhysicsTransform(h,l),worldToSkeleton:h=>this.pixiWorldCoordinatesToSkeleton(h)}),this.state=new Ka(new lg(a)),o&&(this._ticker=o),this.autoUpdate=s,this.boundsProvider=r,this.darkTint=n===void 0?this.skeleton.slots.some(h=>!!h.data.setupPose.darkColor):n,this.darkTint&&(this.slotMeshFactory=()=>new xc)}get debug(){return 
Line truncated
+`;class yg extends li{constructor(t){super(t),this.shaderGenerator=new Up(mL,pL),this.geometryClass=Vw,this.vertexSize=7}packInterleavedGeometry(t,e,s,r,n){const{uint32View:a,float32View:o}=e,h=r/this.vertexSize,l=t.uvs,c=t.indices,u=t.vertexData,d=t._texture.baseTexture._batchLocation,f=Math.min(t.worldAlpha,1),m=Wt.shared.setValue(t._tintRGB).toPremultiplied(f,!0),p=Wt.shared.setValue(t._darkTintRGB).premultiply(f,!0).toPremultiplied(1,!1);for(let g=0;g<u.length;g+=2)o[r++]=u[g],o[r++]=u[g+1],o[r++]=l[g],o[r++]=l[g+1],a[r++]=m,a[r++]=p,o[r++]=d;for(let g=0;g<c.length;g++)s[n++]=h+c[g]}}x(yg,"extension",{name:"darkTintBatch",type:gt.RendererPlugin});St.add(yg);const ai=class ai extends zn{constructor(){const e=new Qc;e.getBuffer("aVertexPosition").static=!1,e.getBuffer("aTextureCoord").static=!1;const s=new il(Ot.EMPTY);super(e,s);x(this,"name","");x(this,"warnedTwoTint",!1)}updateFromSpineData(e,s,r,n,a,o,h,l){var y,_;this.texture=e.texture;const c=a/(l?12:8)*2,u=this.geometry.getBuffer("aTextureCoord");((y=u.data)==null?void 0:y.length)!==c&&(u.data=new Float32Array(c));const d=this.geometry.getBuffer("aVertexPosition");((_=d.data)==null?void 0:_.length)!==c&&(d.data=new Float32Array(c));let f=0;const m=u.data,p=d.data;for(let v=0;v<a;v+=l?12:8){let b=v;p[f]=n[b++],p[f+1]=n[b++],b+=4,m[f]=n[b++],m[f+1]=n[b++],f+=2}l&&!this.warnedTwoTint&&(console.warn("DarkTint is not enabled by default. To enable use a DarkSlotMesh factory while creating the Spine object."),this.warnedTwoTint=!0),ai.auxColor[0]=n[2],ai.auxColor[1]=n[3],ai.auxColor[2]=n[4],ai.auxColor[3]=n[5],this.tint=ai.auxColor,this.alpha=ai.auxColor[3],this.blendMode=qn.toPixiBlending(s);const g=this.geometry.indexBuffer;if(g.data.length!==o.length)g.data=new Uint32Array(o);else{const v=g.data;for(let b=0;b<h;b++)v[b]=o[b]}this.name=r,u.update(),d.update(),g.update()}};x(ai,"auxColor",[0,0,0,0]);let bc=ai;class gL{constructor(t,e,s,r){x(this,"x");x(this,"y");x(this,"width");x(this,"height");this.x=t,this.y=e,this.width=s,this.height=r}calculateBounds(){return{x:this.x,y:this.y,width:this.width,height:this.height}}}class yL{constructor(t=!1){x(this,"clipping");this.clipping=t}calculateBounds(t){if(!t.skeleton)return{x:0,y:0,width:0,height:0};const e=new Mi(t.skeleton.data);e.setupPose(),e.updateWorldTransform(Os.update);const s=e.getBoundsRect(this.clipping?new ao:void 0);return s.width===Number.NEGATIVE_INFINITY?{x:0,y:0,width:0,height:0}:s}}class xL{constructor(t,e=[],s=.05,r=!1){x(this,"animation");x(this,"skins");x(this,"timeStep");x(this,"clipping");this.animation=t,this.skins=e,this.timeStep=s,this.clipping=r}calculateBounds(t){if(!t.skeleton||!t.state)return{x:0,y:0,width:0,height:0};const e=new Ka(t.state.data),s=new Mi(t.skeleton.data),r=this.clipping?new ao:void 0,n=s.data;if(this.skins.length>0){const o=new Za("custom-skin");for(const h of this.skins){const l=n.findSkin(h);l!=null&&o.addSkin(l)}s.setSkin(o)}s.setupPose();const a=this.animation!=null?n.findAnimation(this.animation):null;if(a==null){s.updateWorldTransform(Os.update);const o=s.getBoundsRect(r);return o.width===Number.NEGATIVE_INFINITY?{x:0,y:0,width:0,height:0}:o}else{let o=Number.POSITIVE_INFINITY,h=Number.POSITIVE_INFINITY,l=Number.NEGATIVE_INFINITY,c=Number.NEGATIVE_INFINITY;e.clearTracks(),e.setAnimation(0,a,!1);const u=Math.max(a.duration/this.timeStep,1);for(let f=0;f<u;f++){const m=f>0?this.timeStep:0;e.update(m),e.apply(s),s.update(m),s.updateWorldTransform(Os.update);const p=s.getBoundsRect(r);o=Math.min(o,p.x),h=Math.min(h,p.y),l=Math.max(l,p.x+p.width),c=Math.max(c,p.y+p.height)}const d={x:o,y:h,width:l-o,height:c-h};return d.width===Number.NEGATIVE_INFINITY?{x:0,y:0,width:0,height:0}:d}}}const $t=class $t extends fs{constructor(e){super();x(this,"skeleton");x(this,"state");x(this,"skeletonPhysics");x(this,"darkTint",!1);x(this,"hasNeverUpdated",!0);x(this,"_debug");x(this,"slotMeshFactory",()=>new bc);x(this,"beforeUpdateWorldTransforms",()=>{});x(this,"afterUpdateWorldTransforms",()=>{});x(this,"_autoUpdate",!1);x(this,"_ticker",ss.shared);x(this,"meshesCache",new Map);x(this,"lightColor",new Ft);x(this,"darkColor",new Ft);x(this,"clippingVertAux",new Float32Array(6));x(this,"_boundsProvider");x(this,"_boundsPoint",new zt);x(this,"_boundsSpineID",-1);x(this,"_boundsSpineDirty",!0);x(this,"slotsObject",new Map);x(this,"verticesCache",bt.newFloatArray(1024));x(this,"clippingSlotToPixiMasks",{});e instanceof Dl?e={skeletonData:e}:"skeleton"in e&&(e=new.target.createOptions(e));const{autoUpdate:s=!0,boundsProvider:r,darkTint:n,skeletonData:a,ticker:o}=e;this.skeleton=new Mi(a),this.skeletonPhysics=new gg(this.skeleton,{readTransform:(h,l)=>this.readPhysicsTransform(h,l),worldToSkeleton:h=>this.pixiWorldCoordinatesToSkeleton(h)}),this.state=new Ka(new lg(a)),o&&(this._ticker=o),this.autoUpdate=s,this.boundsProvider=r,this.darkTint=n===void 0?this.skeleton.slots.some(h=>!!h.data.setupPose.darkColor):n,this.darkTint&&(this.slotMeshFactory=()=>new xc)}get debug(){return 
Line truncated

dist/index.html

@@ -9,9 +9,9 @@
       html, body { margin: 0; padding: 0; background: #111; color: #eee; font-family: system-ui, -apple-system, sans-serif; }
       #app { display: flex; flex-direction: column; height: 100vh; }
     </style>
-    <script type="module" crossorigin src="/assets/index-CllsrP2l.js"></script>
+    <script type="module" crossorigin src="/assets/index-BO34Whit.js"></script>
-    <link rel="modulepreload" crossorigin href="/assets/vendor-B3PIHsJG.js">
+    <link rel="modulepreload" crossorigin href="/assets/vendor-D7JxX6Ig.js">
-    <link rel="stylesheet" crossorigin href="/assets/index-DCGuJBRC.css">
+    <link rel="stylesheet" crossorigin href="/assets/index-8AslhRLR.css">
     <script>
             var _paq = window._paq = window._paq || [];
             _paq.push(['enableLinkTracking']);

src/editor/systemSettings.ts

@@ -9,6 +9,7 @@ export const SYSTEM_SETTINGS_VERSION = 1
 const SYSTEM_SETTINGS_CACHE_KEY = 'SpineParticle.SystemSettings.v1'
 
 export type SystemSettingsState = Pick<SettingsState,
+  | 'uiTheme'
   | 'parameterPanelOnRight'
   | 'floatingMenuEnabled'
   | 'undoLimit'
@@ -40,6 +41,7 @@ function clamp(value: unknown, min: number, max: number, fallback: number) {
 
 export function captureSystemSettings(settings: SettingsState): SystemSettingsState {
   return {
+    uiTheme: settings.uiTheme,
     parameterPanelOnRight: settings.parameterPanelOnRight,
     floatingMenuEnabled: settings.floatingMenuEnabled,
     undoLimit: settings.undoLimit,
@@ -65,7 +67,11 @@ function normalizedSystemSettings(value: Partial<SystemSettingsState>, current:
   const axisColor = typeof value.axisColor === 'string' && /^#[0-9a-f]{6}$/i.test(value.axisColor)
     ? value.axisColor
     : current.axisColor
+  const uiTheme = value.uiTheme === 'gray-white' || value.uiTheme === 'deep-blue'
+    ? value.uiTheme
+    : current.uiTheme
   return {
+    uiTheme,
     parameterPanelOnRight: booleanValue('parameterPanelOnRight'),
     floatingMenuEnabled: booleanValue('floatingMenuEnabled'),
     undoLimit: Math.round(clamp(value.undoLimit, 1, 200, current.undoLimit)),

src/i18n/locales/de.json

@@ -95,6 +95,9 @@
   },
   "settings": {
     "title": "Systemeinstellungen",
+    "interfaceStyle": "Oberflächenstil",
+    "deepBlueStyle": "Dunkelblau",
+    "grayWhiteStyle": "Grauweiß",
     "layout": "Schnittstellenlayout",
     "floatingMenu": "Schwebendes Menü",
     "floatingMenuParticleOnly": "Wähle zuerst ein Partikelsystem",

src/i18n/locales/en.json

@@ -107,6 +107,9 @@
   },
   "settings": {
     "title": "Settings",
+    "interfaceStyle": "Interface style",
+    "deepBlueStyle": "Deep blue",
+    "grayWhiteStyle": "Gray white",
     "layout": "Layout",
     "floatingMenu": "Floating menu",
     "floatingMenuParticleOnly": "Select a particle system first",

src/i18n/locales/es.json

@@ -95,6 +95,9 @@
   },
   "settings": {
     "title": "Configuración del sistema",
+    "interfaceStyle": "Estilo de la interfaz",
+    "deepBlueStyle": "Azul oscuro",
+    "grayWhiteStyle": "Gris claro",
     "layout": "Diseño de interfaz",
     "floatingMenu": "Menú flotante",
     "floatingMenuParticleOnly": "Selecciona primero un sistema de partículas",

src/i18n/locales/fr.json

@@ -95,6 +95,9 @@
   },
   "settings": {
     "title": "Paramètres système",
+    "interfaceStyle": "Style de l’interface",
+    "deepBlueStyle": "Bleu profond",
+    "grayWhiteStyle": "Gris clair",
     "layout": "Disposition de l'interface",
     "floatingMenu": "Menu flottant",
     "floatingMenuParticleOnly": "Sélectionnez d'abord un système de particules",

src/i18n/locales/ja.json

@@ -95,6 +95,9 @@
   },
   "settings": {
     "title": "システム設定",
+    "interfaceStyle": "インターフェーススタイル",
+    "deepBlueStyle": "ディープブルー",
+    "grayWhiteStyle": "グレーホワイト",
     "layout": "インターフェースのレイアウト",
     "floatingMenu": "フローティングメニュー",
     "floatingMenuParticleOnly": "先にパーティクルシステムを選択してください",

src/i18n/locales/ko.json

@@ -95,6 +95,9 @@
   },
   "settings": {
     "title": "시스템 설정",
+    "interfaceStyle": "인터페이스 스타일",
+    "deepBlueStyle": "딥 블루",
+    "grayWhiteStyle": "그레이 화이트",
     "layout": "인터페이스 레이아웃",
     "floatingMenu": "플로팅 메뉴",
     "floatingMenuParticleOnly": "먼저 파티클 시스템을 선택하세요",

src/i18n/locales/pt-BR.json

@@ -95,6 +95,9 @@
   },
   "settings": {
     "title": "Configurações do sistema",
+    "interfaceStyle": "Estilo da interface",
+    "deepBlueStyle": "Azul escuro",
+    "grayWhiteStyle": "Cinza claro",
     "layout": "Layout da interface",
     "floatingMenu": "Menu flutuante",
     "floatingMenuParticleOnly": "Selecione primeiro um sistema de partículas",

src/i18n/locales/ru.json

@@ -107,6 +107,9 @@
   },
   "settings": {
     "title": "Настройки",
+    "interfaceStyle": "Стиль интерфейса",
+    "deepBlueStyle": "Тёмно-синий",
+    "grayWhiteStyle": "Серо-белый",
     "layout": "Расположение интерфейса",
     "floatingMenu": "Плавающее меню",
     "floatingMenuParticleOnly": "Сначала выберите систему частиц",

src/i18n/locales/zh-CN.json

@@ -107,6 +107,9 @@
   },
   "settings": {
     "title": "系统设置",
+    "interfaceStyle": "界面风格",
+    "deepBlueStyle": "深蓝风格",
+    "grayWhiteStyle": "灰白风格",
     "layout": "界面布局",
     "floatingMenu": "悬浮菜单",
     "floatingMenuParticleOnly": "请先选择粒子系统",

src/i18n/locales/zh-TW.json

@@ -95,6 +95,9 @@
   },
   "settings": {
     "title": "系統設定",
+    "interfaceStyle": "介面風格",
+    "deepBlueStyle": "深藍風格",
+    "grayWhiteStyle": "灰白風格",
     "layout": "介面佈局",
     "floatingMenu": "懸浮選單",
     "floatingMenuParticleOnly": "請先選擇粒子系統",

src/spine/SpineObjectPanel.vue

@@ -340,54 +340,54 @@ function clearBundle() {
 </script>
 
 <style scoped>
-.spine-editor { display: grid; gap: 10px; color: #c5cbe0; }
+.spine-editor { display: grid; gap: 10px; color: var(--ui-text-body); }
-.editor-title,.section-title { color: #dce2f5; font-weight: 700; }
+.editor-title,.section-title { color: var(--ui-text-strong); font-weight: 700; }
-.editor-title { padding-bottom: 9px; border-bottom: 1px solid #30394d; }
+.editor-title { padding-bottom: 9px; border-bottom: 1px solid var(--ui-border-strong); }
 .grid { display: grid; gap: 8px; }
 .grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
-.field { display: grid; gap: 5px; min-width: 0; color: #919bb7; font-size: 12px; }
+.field { display: grid; gap: 5px; min-width: 0; color: var(--ui-text-secondary); font-size: 12px; }
-.field input,.field select,.asset-name { box-sizing: border-box; width: 100%; min-width: 0; height: 35px; padding: 0 10px; color: #e2e6f3; background: #101625; border: 1px solid #32405b; border-radius: 6px; }
+.field input,.field select,.asset-name { box-sizing: border-box; width: 100%; min-width: 0; height: 35px; padding: 0 10px; color: var(--ui-text-strong); background: var(--ui-control-deep); border: 1px solid var(--ui-border-strong); border-radius: 6px; }
-.divider { height: 1px; background: #30394d; margin: 2px 0; }
+.divider { height: 1px; background: var(--ui-border-strong); margin: 2px 0; }
 .asset-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
-.asset-name { display: flex; align-items: center; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #7f8aa7; }
+.asset-name { display: flex; align-items: center; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--ui-text-faint); }
-button { height: 35px; padding: 0 13px; border: 1px solid #3b4a67; border-radius: 6px; background: #33415b; color: #e2e6f3; cursor: pointer; }
+button { height: 35px; padding: 0 13px; border: 1px solid var(--ui-border-strong); border-radius: 6px; background: var(--ui-border-strong); color: var(--ui-text-strong); cursor: pointer; }
 button:hover { filter: brightness(1.13); }
 button:disabled { opacity: .55; cursor: wait; }
-.folder-select { width: 100%; border-color: #6659c7; background: #4940a8; color: #fff; }
+.folder-select { width: 100%; border-color: var(--ui-accent-strong); background: var(--ui-accent-button); color: #fff; }
-.folder-hint { margin-top: -5px; color: #69758e; font-size: 10px; line-height: 1.45; }
+.folder-hint { margin-top: -5px; color: var(--ui-text-faint); font-size: 10px; line-height: 1.45; }
 .asset-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
-.asset-actions .load { background: #5543df; border-color: #6959ec; }
+.asset-actions .load { background: var(--ui-accent-button); border-color: var(--ui-accent-bright); }
 .asset-actions .clear { background: #702b34; border-color: #803842; }
-.runtime-note { color: #69758e; font-size: 11px; text-align: center; }
+.runtime-note { color: var(--ui-text-faint); font-size: 11px; text-align: center; }
 .error { padding: 8px 10px; color: #ffabb2; background: #4b2028; border: 1px solid #76323e; border-radius: 6px; font-size: 12px; }
-.section-box { display: grid; gap: 8px; padding: 10px; background: #182132; border: 1px solid #303c54; border-radius: 7px; }
+.section-box { display: grid; gap: 8px; padding: 10px; background: var(--ui-surface); border: 1px solid var(--ui-border-strong); border-radius: 7px; }
-.empty { color: #667187; font-size: 12px; padding: 5px 0; }
+.empty { color: var(--ui-text-faint); font-size: 12px; padding: 5px 0; }
-.bone-tree { max-height: 240px; overflow: auto; padding: 4px 0; background: #111827; border-radius: 5px; }
+.bone-tree { max-height: 240px; overflow: auto; padding: 4px 0; background: var(--ui-surface); border-radius: 5px; }
 .tree-title-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
 .tree-tabs { display: flex; gap: 3px; margin: 6px 0; }
-.tree-tabs button { height: 24px; padding: 0 8px; border: 1px solid transparent; border-radius: 5px; background: transparent; color: #8d98ae; font-size: 10px; cursor: pointer; }
+.tree-tabs button { height: 24px; padding: 0 8px; border: 1px solid transparent; border-radius: 5px; background: transparent; color: var(--ui-text-faint); font-size: 10px; cursor: pointer; }
-.tree-tabs button:hover { background: #273246; }
+.tree-tabs button:hover { background: var(--ui-control-hover); }
-.tree-tabs button.on { border-color: #7774ff; background: #35336b; color: #fff; }
+.tree-tabs button.on { border-color: var(--ui-accent-strong); background: var(--ui-accent-soft); color: #fff; }
-.selected-bone { width: auto; min-width: 0; max-width: 100%; height: 24px; flex: 0 1 auto; overflow: hidden; padding: 0 7px; color: #75819c; background: #182132; border: 1px solid transparent; border-radius: 5px; font-size: 10px; text-align: right; white-space: nowrap; text-overflow: ellipsis; }
+.selected-bone { width: auto; min-width: 0; max-width: 100%; height: 24px; flex: 0 1 auto; overflow: hidden; padding: 0 7px; color: var(--ui-text-faint); background: var(--ui-surface); border: 1px solid transparent; border-radius: 5px; font-size: 10px; text-align: right; white-space: nowrap; text-overflow: ellipsis; }
-.selected-bone.active { color: #aeb9d4; background: #242f44; border-color: #35445e; cursor: pointer; }
+.selected-bone.active { color: var(--ui-text-body); background: var(--ui-surface-raised); border-color: var(--ui-border-strong); cursor: pointer; }
-.selected-bone.active:hover { border-color: #675ec4; background: #302b57; }
+.selected-bone.active:hover { border-color: var(--ui-accent-strong); background: var(--ui-accent-soft); }
 .selected-bone:disabled { opacity: 1; cursor: default; }
-.selected-bone strong { color: #c5cde3; font-weight: 600; }
+.selected-bone strong { color: var(--ui-text-body); font-weight: 600; }
-.tree-action { height: 24px; padding: 0 8px; color: #9aa7c2; background: #242f44; border-color: #35445e; font-size: 10px; }
+.tree-action { height: 24px; padding: 0 8px; color: var(--ui-text-faint); background: var(--ui-surface-raised); border-color: var(--ui-border-strong); font-size: 10px; }
 .bone-search { position: relative; }
-.bone-search input { box-sizing: border-box; width: 100%; height: 30px; padding: 0 32px 0 9px; color: #dce2f2; background: #101827; border: 1px solid #33415b; border-radius: 5px; font-size: 11px; outline: none; }
+.bone-search input { box-sizing: border-box; width: 100%; height: 30px; padding: 0 32px 0 9px; color: var(--ui-text-strong); background: var(--ui-control-deep); border: 1px solid var(--ui-border-strong); border-radius: 5px; font-size: 11px; outline: none; }
-.bone-search input:focus { border-color: #7065df; box-shadow: 0 0 0 1px rgba(112,101,223,.22); }
+.bone-search input:focus { border-color: var(--ui-accent-bright); box-shadow: 0 0 0 1px var(--ui-focus-ring); }
-.bone-search button { position: absolute; top: 3px; right: 3px; width: 24px; height: 24px; padding: 0; border: 0; color: #8d98b0; background: transparent; }
+.bone-search button { position: absolute; top: 3px; right: 3px; width: 24px; height: 24px; padding: 0; border: 0; color: var(--ui-text-faint); background: transparent; }
-.bone { display: flex; align-items: center; gap: 4px; min-height: 25px; color: #aeb8d2; font-size: 12px; border-bottom: 1px solid rgba(72,84,112,.22); cursor: pointer; outline: none; }
+.bone { display: flex; align-items: center; gap: 4px; min-height: 25px; color: var(--ui-text-body); font-size: 12px; border-bottom: 1px solid var(--ui-border-faint); cursor: pointer; outline: none; }
-.bone:hover { background: rgba(69,86,126,.22); }
+.bone:hover { background: var(--ui-hover-translucent); }
-.bone.selected { color: #f0edff; background: rgba(107,83,221,.32); box-shadow: inset 2px 0 #8e72ff; }
+.bone.selected { color: var(--ui-accent-text-soft); background: var(--ui-selection-translucent); box-shadow: inset 2px 0 var(--ui-accent-bright); }
-.bone:focus-visible { box-shadow: inset 0 0 0 1px #7d72dd; }
+.bone:focus-visible { box-shadow: inset 0 0 0 1px var(--ui-accent-strong); }
-.bone-toggle { width: 22px; height: 22px; padding: 0; border: 0; background: transparent; color: #9aa7c2; }
+.bone-toggle { width: 22px; height: 22px; padding: 0; border: 0; background: transparent; color: var(--ui-text-faint); }
-.bone-toggle:hover { background: #26324a; }
+.bone-toggle:hover { background: var(--ui-surface-raised); }
-.bone-leaf { display: inline-flex; width: 22px; justify-content: center; color: #58647d; }
+.bone-leaf { display: inline-flex; width: 22px; justify-content: center; color: var(--ui-text-faint); }
 .bone-name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
 .slot-row { padding-right: 8px; }
-.slot-order { width: 24px; flex: 0 0 24px; color: #66758e; font-size: 10px; font-variant-numeric: tabular-nums; text-align: right; }
+.slot-order { width: 24px; flex: 0 0 24px; color: var(--ui-text-faint); font-size: 10px; font-variant-numeric: tabular-nums; text-align: right; }
-.slot-attachment { margin-left: auto; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #6d7c96; font-size: 10px; }
+.slot-attachment { margin-left: auto; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ui-text-faint); font-size: 10px; }
 @media (max-width: 430px) { .grid.three { grid-template-columns: 1fr; } }
 </style>

src/store/particleStore.ts

@@ -47,6 +47,7 @@ export interface ScenePath {
 }
 
 export type SceneObjectType = 'particle' | 'collision' | 'path' | 'spine'
+export type UiTheme = 'deep-blue' | 'gray-white'
 
 export interface EditorState {
   viewScale: number
@@ -56,6 +57,8 @@ export interface EditorState {
 
 /** 系统设置(可通过右上角设置面板调整) */
 export interface SettingsState {
+  /** 编辑器界面配色；属于浏览器系统设置，不写入工程数据。 */
+  uiTheme: UiTheme
   /** 参数面板是否显示在页面右侧；关闭时显示在左侧。 */
   parameterPanelOnRight: boolean
   /** 是否用画布左侧悬浮菜单切换参数分区。 */
@@ -191,6 +194,7 @@ export const useParticleStore = defineStore('particle', {
     // 与 Spine 编辑器默认时间基准对齐：1 秒 = 30 帧。
     timeline: { playing: true, loop: true, abLoop: false, frame: 0, totalFrames: 60, playbackStart: 0, playbackEnd: 59, fps: 30, recorded: false, animation: 'animation', animations: ['animation'] } as TimelineState,
     settings: {
+      uiTheme: 'deep-blue',
       parameterPanelOnRight: true,
       floatingMenuEnabled: false,
       tickEnabled: false,

src/style.css

@@ -9,6 +9,139 @@ html, body {
   color: #e8e8f0;
   font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
 }
+body {
+  color-scheme: dark;
+  --ui-app-bg: #0b0b12;
+  --ui-chrome-bg: #12121c;
+  --ui-panel-bg: #14141f;
+  --ui-surface: #171d2a;
+  --ui-surface-soft: #181f2e;
+  --ui-surface-muted: #191924;
+  --ui-surface-raised: #202a3b;
+  --ui-control-bg: #1a1a28;
+  --ui-control-bg-alt: #1e1e2e;
+  --ui-control-deep: #101725;
+  --ui-control-hover: #273246;
+  --ui-control-active: #2b3a5c;
+  --ui-hover-surface: #20202e;
+  --ui-button-surface: #202a3b;
+  --ui-border: #2a2a3c;
+  --ui-border-control: #2e2e44;
+  --ui-border-subtle: #2a3549;
+  --ui-border-strong: #344158;
+  --ui-border-button: #3a4963;
+  --ui-text-primary: #e8e8f0;
+  --ui-text: #aab;
+  --ui-text-soft: #ccd;
+  --ui-text-strong: #dde;
+  --ui-text-body: #aeb8cf;
+  --ui-text-secondary: #8a93bb;
+  --ui-text-muted: #667;
+  --ui-text-faint: #647089;
+  --ui-accent: #625ff1;
+  --ui-accent-strong: #7774ff;
+  --ui-accent-bright: #8982ff;
+  --ui-accent-text-muted: #9fb2ff;
+  --ui-accent-text-soft: #b9b6ff;
+  --ui-accent-soft: #35336a;
+  --ui-accent-soft-bg: #2b2b55;
+  --ui-accent-bg: #4540a0;
+  --ui-accent-bg-hover: #554dc2;
+  --ui-accent-button: #514dcc;
+  --ui-selected-bg: #3a5a8c;
+  --ui-selected-border: #5a7ab8;
+  --ui-focus: #8b86ff;
+  --ui-scrollbar: #3a455e;
+  --ui-scrollbar-hover: #596683;
+  --ui-popover-bg: rgba(20,20,32,.98);
+  --ui-panel-overlay: rgba(20,20,32,.97);
+  --ui-nav-bg: #191e2c;
+  --ui-nav-hover: #242b40;
+  --ui-switch-off: #39445a;
+  --ui-backdrop: rgba(5,8,15,.72);
+  --ui-backdrop-soft: rgba(5,8,15,.26);
+  --ui-backdrop-strong: rgba(6,9,15,.78);
+  --ui-overlay-soft: rgba(15,18,29,.9);
+  --ui-border-translucent: rgba(79,91,121,.72);
+  --ui-border-faint: rgba(72,84,112,.22);
+  --ui-hover-translucent: rgba(69,86,126,.22);
+  --ui-selection-translucent: rgba(107,83,221,.32);
+  --ui-focus-ring: rgba(112,101,223,.22);
+  --ui-accent-overlay: rgba(96,95,240,.85);
+  --ui-accent-halo: rgba(96,95,240,.28);
+  --ui-accent-glow: rgba(96,95,240,.8);
+  --ui-accent-cross: rgba(126,118,255,.75);
+  --ui-sunken: #0d0d14;
+  --ui-canvas-bg: #0e1219;
+  --ui-canvas-grid: #141a26;
+  background: var(--ui-app-bg);
+  color: var(--ui-text-primary);
+}
+body[data-ui-theme='gray-white'] {
+  --ui-app-bg: #24272b;
+  --ui-chrome-bg: #2d3035;
+  --ui-panel-bg: #35393e;
+  --ui-surface: #41454a;
+  --ui-surface-soft: #484c51;
+  --ui-surface-muted: #3d4146;
+  --ui-surface-raised: #50555a;
+  --ui-control-bg: #4b4f54;
+  --ui-control-bg-alt: #55595e;
+  --ui-control-deep: #303338;
+  --ui-control-hover: #5e6369;
+  --ui-control-active: #347da6;
+  --ui-hover-surface: #55595e;
+  --ui-button-surface: #50555a;
+  --ui-border: #5b6066;
+  --ui-border-control: #62686e;
+  --ui-border-subtle: #4c5055;
+  --ui-border-strong: #6a7077;
+  --ui-border-button: #70767c;
+  --ui-text-primary: #f3f5f6;
+  --ui-text: #cbd0d4;
+  --ui-text-soft: #dce0e3;
+  --ui-text-strong: #e7eaec;
+  --ui-text-body: #d1d5d9;
+  --ui-text-secondary: #b7bdc3;
+  --ui-text-muted: #9aa1a8;
+  --ui-text-faint: #8f969d;
+  --ui-accent: #3f9ed8;
+  --ui-accent-strong: #61b8ea;
+  --ui-accent-bright: #82cbef;
+  --ui-accent-text-muted: #a9d9f0;
+  --ui-accent-text-soft: #d0eaf7;
+  --ui-accent-soft: #2f6382;
+  --ui-accent-soft-bg: #346f90;
+  --ui-accent-bg: #347da6;
+  --ui-accent-bg-hover: #4295c1;
+  --ui-accent-button: #347da6;
+  --ui-selected-bg: #347da6;
+  --ui-selected-border: #61b8ea;
+  --ui-focus: #82cbef;
+  --ui-scrollbar: #6b7279;
+  --ui-scrollbar-hover: #838b92;
+  --ui-popover-bg: rgba(53,57,62,.98);
+  --ui-panel-overlay: rgba(53,57,62,.97);
+  --ui-nav-bg: #3b3f44;
+  --ui-nav-hover: #4b5055;
+  --ui-switch-off: #6a7076;
+  --ui-backdrop: rgba(20,22,24,.72);
+  --ui-backdrop-soft: rgba(20,22,24,.26);
+  --ui-backdrop-strong: rgba(18,20,22,.78);
+  --ui-overlay-soft: rgba(39,42,46,.92);
+  --ui-border-translucent: rgba(120,128,136,.72);
+  --ui-border-faint: rgba(120,128,136,.22);
+  --ui-hover-translucent: rgba(130,145,160,.18);
+  --ui-selection-translucent: rgba(63,158,216,.26);
+  --ui-focus-ring: rgba(63,158,216,.24);
+  --ui-accent-overlay: rgba(63,158,216,.85);
+  --ui-accent-halo: rgba(63,158,216,.28);
+  --ui-accent-glow: rgba(63,158,216,.8);
+  --ui-accent-cross: rgba(97,184,234,.75);
+  --ui-sunken: #2d3034;
+  --ui-canvas-bg: #4b4d51;
+  --ui-canvas-grid: #55585d;
+}
 body { position: fixed; inset: 0; }
 * { box-sizing: border-box; }
 #app { position: fixed; inset: 0; width: auto; height: auto; overflow: clip; }

src/views/ColorGradientEditor.vue

@@ -178,20 +178,20 @@ function normalizeHex(value: string, fallback: string) {
 
 <style scoped>
 .gradient-editor { margin: 8px 0 11px 68px; }
-.gradient-bar { position: relative; height: 18px; margin-bottom: 14px; border: 1px solid #465570; border-radius: 6px; cursor: crosshair; }
+.gradient-bar { position: relative; height: 18px; margin-bottom: 14px; border: 1px solid var(--ui-border-strong); border-radius: 6px; cursor: crosshair; }
-.gradient-stop { position: absolute; top: 15px; width: 14px; height: 17px; padding: 0; transform: translateX(-50%); border: 2px solid #d8deea; border-radius: 2px 2px 5px 5px; background: var(--stop-color); cursor: grab; box-shadow: 0 1px 3px #0009; }
+.gradient-stop { position: absolute; top: 15px; width: 14px; height: 17px; padding: 0; transform: translateX(-50%); border: 2px solid var(--ui-text-strong); border-radius: 2px 2px 5px 5px; background: var(--stop-color); cursor: grab; box-shadow: 0 1px 3px #0009; }
-.gradient-stop::before { content: ''; position: absolute; left: 2px; top: -7px; border-left: 3px solid transparent; border-right: 3px solid transparent; border-bottom: 5px solid #d8deea; }
+.gradient-stop::before { content: ''; position: absolute; left: 2px; top: -7px; border-left: 3px solid transparent; border-right: 3px solid transparent; border-bottom: 5px solid var(--ui-text-strong); }
-.gradient-stop.selected { outline: 2px solid #7774ff; outline-offset: 1px; z-index: 2; }
+.gradient-stop.selected { outline: 2px solid var(--ui-accent-strong); outline-offset: 1px; z-index: 2; }
 .gradient-stop:active { cursor: grabbing; }
 .gradient-controls { display: flex; align-items: center; gap: 5px; margin-top: 30px; }
-.gradient-color { width: 28px; height: 24px; padding: 1px; border: 1px solid #465570; border-radius: 4px; background: #151b27; cursor: pointer; }
+.gradient-color { width: 28px; height: 24px; padding: 1px; border: 1px solid var(--ui-border-strong); border-radius: 4px; background: var(--ui-surface-soft); cursor: pointer; }
-.gradient-hex-input { width: 66px; padding: 4px 5px; border: 1px solid #344158; border-radius: 4px; outline: none; background: #101725; color: #aeb8cb; font-size: 10px; font-family: monospace; }
+.gradient-hex-input { width: 66px; padding: 4px 5px; border: 1px solid var(--ui-border-strong); border-radius: 4px; outline: none; background: var(--ui-control-deep); color: var(--ui-text-body); font-size: 10px; font-family: monospace; }
-.gradient-hex-input:focus { border-color: #7774ff; color: #fff; }
+.gradient-hex-input:focus { border-color: var(--ui-accent-strong); color: #fff; }
-.gradient-position { display: flex; align-items: center; color: #71809a; font-size: 10px; }
+.gradient-position { display: flex; align-items: center; color: var(--ui-text-faint); font-size: 10px; }
-.gradient-position input { width: 43px; padding: 3px 4px; border: 1px solid #344158; border-radius: 4px; outline: none; background: #101725; color: #dce3ef; text-align: right; }
+.gradient-position input { width: 43px; padding: 3px 4px; border: 1px solid var(--ui-border-strong); border-radius: 4px; outline: none; background: var(--ui-control-deep); color: var(--ui-text-strong); text-align: right; }
-.gradient-action { width: 25px; height: 24px; padding: 0; border: 1px solid #3a4860; border-radius: 4px; background: #273246; color: #cbd4e5; cursor: pointer; }
+.gradient-action { width: 25px; height: 24px; padding: 0; border: 1px solid var(--ui-border-strong); border-radius: 4px; background: var(--ui-control-hover); color: var(--ui-text-body); cursor: pointer; }
-.gradient-action:hover:not(:disabled) { border-color: #7774ff; color: #fff; }
+.gradient-action:hover:not(:disabled) { border-color: var(--ui-accent-strong); color: #fff; }
 .gradient-action.danger { color: #e3a5aa; }
 .gradient-action:disabled { opacity: .35; cursor: not-allowed; }
-.gradient-hint { margin-top: 5px; color: #59667b; font-size: 9px; }
+.gradient-hint { margin-top: 5px; color: var(--ui-text-faint); font-size: 9px; }
 </style>

src/views/CurveEditor.vue

@@ -197,20 +197,20 @@ onUnmounted(() => { ro?.disconnect() })
 .ce { display: flex; align-items: flex-start; gap: 6px; width: 100%; }
 .ce-editor { flex: 1; min-width: 0; }
 .ce-reset {
-  flex: 0 0 auto; padding: 5px 7px; border: 1px solid #3b4b65; border-radius: 5px;
+  flex: 0 0 auto; padding: 5px 7px; border: 1px solid var(--ui-border-strong); border-radius: 5px;
-  background: #242f42; color: #c4cee2; font-size: 10px; cursor: pointer;
+  background: var(--ui-surface-raised); color: var(--ui-text-body); font-size: 10px; cursor: pointer;
 }
-.ce-reset:hover { border-color: #7774ff; background: #4f4dc2; color: #fff; }
+.ce-reset:hover { border-color: var(--ui-accent-strong); background: var(--ui-accent-button); color: #fff; }
-.ce-svg { width: 100%; height: 110px; display: block; border: 1px solid #2a2a3c; border-radius: 6px; background: #10101a; cursor: crosshair; touch-action: none; }
+.ce-svg { width: 100%; height: 110px; display: block; border: 1px solid var(--ui-border); border-radius: 6px; background: var(--ui-sunken); cursor: crosshair; touch-action: none; }
-.ce-grid line { stroke: #1e1e30; stroke-width: 1; }
+.ce-grid line { stroke: var(--ui-control-bg-alt); stroke-width: 1; }
-.ce-frame { stroke: #2e2e44; stroke-width: 1; }
+.ce-frame { stroke: var(--ui-border-control); stroke-width: 1; }
-.ce-line { stroke: #6ea0e8; stroke-width: 2; stroke-linejoin: round; }
+.ce-line { stroke: var(--ui-accent-strong); stroke-width: 2; stroke-linejoin: round; }
-.ce-handles line { stroke: #8d96b5; stroke-width: 1; stroke-dasharray: 3 2; }
+.ce-handles line { stroke: var(--ui-text-faint); stroke-width: 1; stroke-dasharray: 3 2; }
-.ce-handles circle { fill: #b7c2dd; stroke: #344d94; stroke-width: 1.2; cursor: grab; }
+.ce-handles circle { fill: var(--ui-text-body); stroke: var(--ui-accent-button); stroke-width: 1.2; cursor: grab; }
 .ce-handles circle:active { cursor: grabbing; }
-.ce-node { fill: #ffffff; stroke: #3a55aa; stroke-width: 1.6; pointer-events: none; }
+.ce-node { fill: #ffffff; stroke: var(--ui-accent-button); stroke-width: 1.6; pointer-events: none; }
 .ce-hit { fill: transparent; stroke: none; cursor: grab; }
 .ce-hit:active { cursor: grabbing; }
 .ce-nav { display: flex; justify-content: space-between; margin-top: 3px; }
-.ce-tip { color: #566; font-size: 10px; }
+.ce-tip { color: var(--ui-text-muted); font-size: 10px; }
 </style>

src/views/EditorWorkspace.vue

@@ -71,7 +71,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, onUnmounted, ref } from 'vue'
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
 import { useParticleStore } from '../store/particleStore'
 import { installSystemSettingsCache } from '../editor/systemSettings'
 import Stage from './Stage.vue'
@@ -87,6 +87,12 @@ import { trackMatomoEvent } from '../editor/analytics'
 defineEmits<{ (e: 'home'): void }>()
 const store = useParticleStore()
 installSystemSettingsCache(store)
+watch(
+  () => store.settings.uiTheme,
+  (theme) => { document.body.dataset.uiTheme = theme },
+  { immediate: true },
+)
+onUnmounted(() => { delete document.body.dataset.uiTheme })
 const { activeSection, activateSection, canUseSection } = provideParticlePanel()
 const showParameterPanel = computed(() => !store.settings.floatingMenuEnabled || activeSection.value !== null)
 const panelW = ref(360)
@@ -243,8 +249,8 @@ function onTimelineDrag(e: PointerEvent) {
 <style scoped>
 .layout { display: flex; width: 100%; height: 100%; min-height: 0; overflow: clip; }
 .parameter-panel { flex-shrink: 0; height: 100%; min-height: 0; overflow: clip; }
-.resizer-col { width: 5px; cursor: col-resize; background: #1c1c2a; border-left: 1px solid #2a2a3c; border-right: 1px solid #2a2a3c; flex-shrink: 0; }
+.resizer-col { width: 5px; cursor: col-resize; background: var(--ui-border); border-left: 1px solid var(--ui-border); border-right: 1px solid var(--ui-border); flex-shrink: 0; }
-.resizer-col:hover { background: #3a5a8c; }
+.resizer-col:hover { background: var(--ui-selected-bg); }
 .right { flex: 1; min-width: 0; height: 100%; min-height: 0; overflow: clip; display: flex; flex-direction: column; }
 .panel-right .right { order: 1; }
 .panel-right .resizer-col { order: 2; }
@@ -254,28 +260,28 @@ function onTimelineDrag(e: PointerEvent) {
   position: absolute; right: 12px; top: 12px; z-index: 6; display: flex;
   width: clamp(184px, 15vw, 236px); max-height: calc(100% - 124px);
   flex-direction: column; gap: 5px; overflow-y: auto; box-sizing: border-box; padding: 8px;
-  border: 1px solid rgba(79, 91, 121, .72); border-radius: 10px;
+  border: 1px solid var(--ui-border-translucent); border-radius: 10px;
-  background: rgba(15, 18, 29, .9); box-shadow: 0 12px 30px rgba(0, 0, 0, .36);
+  background: var(--ui-overlay-soft); box-shadow: 0 12px 30px rgba(0, 0, 0, .36);
-  scrollbar-width: thin; scrollbar-color: #3a455e transparent;
+  scrollbar-width: thin; scrollbar-color: var(--ui-scrollbar) transparent;
 }
 .floating-section-nav.nav-left { left: 12px; right: auto; }
 .floating-section-tab {
   display: flex; width: 100%; min-height: 40px; flex: 0 0 auto; align-items: center; gap: 9px;
-  padding: 0 10px; border: 1px solid #2d3548; border-radius: 8px;
+  padding: 0 10px; border: 1px solid var(--ui-border); border-radius: 8px;
-  background: #191e2c; color: #aeb9cf; font: inherit; font-size: 12px; text-align: left; cursor: pointer;
+  background: var(--ui-nav-bg); color: var(--ui-text-body); font: inherit; font-size: 12px; text-align: left; cursor: pointer;
 }
-.floating-section-tab:hover:not(:disabled) { border-color: rgba(112, 121, 167, .45); background: #242b40; color: #f0f3fb; }
+.floating-section-tab:hover:not(:disabled) { border-color: var(--ui-border-strong); background: var(--ui-nav-hover); color: var(--ui-text-primary); }
 .floating-section-tab.selected {
-  border-color: #6f69db; background: #37365e; color: #f5f4ff;
+  border-color: var(--ui-accent); background: var(--ui-accent-soft); color: var(--ui-accent-text-soft);
-  box-shadow: inset 3px 0 #8580ff;
+  box-shadow: inset 3px 0 var(--ui-accent-strong);
 }
-.floating-section-tab:focus-visible { outline: 2px solid #8b86ff; outline-offset: 1px; }
+.floating-section-tab:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 1px; }
-.floating-section-tab:disabled { color: #596476; cursor: not-allowed; opacity: .58; }
+.floating-section-tab:disabled { color: var(--ui-text-faint); cursor: not-allowed; opacity: .58; }
 .floating-section-index {
   display: grid; width: 20px; height: 20px; flex: 0 0 20px; place-items: center;
-  border-radius: 5px; background: #252d40; color: #8390ad; font-size: 10px; font-variant-numeric: tabular-nums;
+  border-radius: 5px; background: var(--ui-surface-raised); color: var(--ui-text-faint); font-size: 10px; font-variant-numeric: tabular-nums;
 }
-.floating-section-tab.selected .floating-section-index { background: #7771e8; color: #fff; }
+.floating-section-tab.selected .floating-section-index { background: var(--ui-accent-strong); color: #fff; }
 .floating-section-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .stage-area.timeline-collapsed :deep(.top-operation-stack) { display: none; }
 .stage-area.operation-bar-clipped :deep(.top-operation-stack) {
@@ -288,7 +294,7 @@ function onTimelineDrag(e: PointerEvent) {
 .timeline-collapse-toggle {
   position: absolute; left: 50%; bottom: calc(var(--operation-bar-rendered-height, 84px) - 1px); z-index: 19;
   width: 96px; height: 20.4px; padding: 0; transform: translateX(-50%);
-  border: 0; background: transparent; color: #8792a6; cursor: ns-resize;
+  border: 0; background: transparent; color: var(--ui-text-faint); cursor: ns-resize;
   touch-action: none; user-select: none;
 }
 .timeline-collapse-toggle.collapsed { bottom: 0; }
@@ -296,16 +302,16 @@ function onTimelineDrag(e: PointerEvent) {
   position: absolute; inset: 0; width: 100%; height: 100%;
   fill: none;
 }
-.timeline-collapse-fill { fill: #12121c; }
+.timeline-collapse-fill { fill: var(--ui-chrome-bg); }
-.timeline-collapse-outline { fill: none; stroke: #2a2a3c; stroke-width: .75; }
+.timeline-collapse-outline { fill: none; stroke: var(--ui-border); stroke-width: .75; }
 .timeline-collapse-lines {
   position: absolute; top: 7px; left: 50%; display: grid;
   gap: 2px; transform: translateX(-50%);
 }
 .timeline-collapse-lines i { display: block; width: 11px; height: 1px; border-radius: 1px; background: currentColor; }
-.timeline-collapse-toggle:hover { color: #b3bdce; }
+.timeline-collapse-toggle:hover { color: var(--ui-text-body); }
-.timeline-collapse-toggle:focus-visible { outline: 2px solid #8b86ff; outline-offset: -2px; }
+.timeline-collapse-toggle:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: -2px; }
-.resizer-row { height: 4px; cursor: row-resize; background: #1c1c2a; border-top: 1px solid #2a2a3c; border-bottom: 1px solid #2a2a3c; flex-shrink: 0; }
+.resizer-row { height: 4px; cursor: row-resize; background: var(--ui-border); border-top: 1px solid var(--ui-border); border-bottom: 1px solid var(--ui-border); flex-shrink: 0; }
-.resizer-row:hover { background: #3a5a8c; }
+.resizer-row:hover { background: var(--ui-selected-bg); }
 .timeline-area { position: relative; z-index: 10; flex-shrink: 0; overflow: visible; }
 </style>

src/views/HelpDialog.vue

@@ -304,107 +304,107 @@ onBeforeUnmount(() => window.removeEventListener('keydown', onKeydown))
 <style scoped>
 .help-overlay {
   position: absolute; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; padding: 72px 24px 28px;
-  box-sizing: border-box; background: rgba(5, 8, 15, .72); backdrop-filter: blur(3px);
+  box-sizing: border-box; background: var(--ui-backdrop); backdrop-filter: blur(3px);
 }
 .help-dialog {
   width: min(820px, 100%); height: 100%; max-height: 100%; display: flex; flex-direction: column; overflow: hidden;
-  border: 1px solid #3a4864; border-radius: 14px; background: #141a27; color: #b8c3d8;
+  border: 1px solid var(--ui-border-strong); border-radius: 14px; background: var(--ui-surface); color: var(--ui-text-body);
   box-shadow: 0 22px 70px rgba(0, 0, 0, .62);
 }
 .help-head {
   position: relative; display: flex; align-items: flex-end; min-height: 82px; padding: 14px 52px 0 18px;
-  border-bottom: 1px solid #2b354a; background: linear-gradient(135deg, #202942, #181e2d);
+  border-bottom: 1px solid var(--ui-border-subtle); background: linear-gradient(135deg, var(--ui-surface-raised), var(--ui-surface-soft));
 }
 .help-tabs { display: grid; width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
 .help-tab {
   display: flex; min-width: 0; flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px;
   padding: 11px 14px 10px; border: 1px solid transparent; border-bottom: 0; border-radius: 9px 9px 0 0;
-  background: transparent; color: #7786a3; font: inherit; text-align: left; cursor: pointer;
+  background: transparent; color: var(--ui-text-faint); font: inherit; text-align: left; cursor: pointer;
 }
 .help-tab strong { color: inherit; font-size: 19px; }
 .help-tab small { overflow: hidden; width: 100%; color: inherit; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
-.help-tab:hover { color: #b9c5dc; }
+.help-tab:hover { color: var(--ui-text-body); }
-.help-tab.active { border-color: #3a4864; background: #141a27; color: #eef2ff; }
+.help-tab.active { border-color: var(--ui-border-strong); background: var(--ui-surface); color: var(--ui-accent-text-soft); }
-.help-tab:focus-visible { outline: 2px solid #8b86ff; outline-offset: -2px; }
+.help-tab:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: -2px; }
 .help-close {
-  position: absolute; top: 18px; right: 18px; width: 28px; height: 28px; border: 1px solid #43516b; border-radius: 6px;
+  position: absolute; top: 18px; right: 18px; width: 28px; height: 28px; border: 1px solid var(--ui-border-button); border-radius: 6px;
-  background: #273249; color: #ccd7ed; cursor: pointer;
+  background: var(--ui-control-hover); color: var(--ui-text-body); cursor: pointer;
 }
-.help-close:hover { border-color: #7774ff; background: #3b4670; color: #fff; }
+.help-close:hover { border-color: var(--ui-accent-strong); background: var(--ui-accent-soft); color: #fff; }
 .help-body {
   min-height: 0; overflow: auto; padding: 18px 20px 21px;
-  scrollbar-width: thin; scrollbar-color: #3a455e transparent;
+  scrollbar-width: thin; scrollbar-color: var(--ui-scrollbar) transparent;
 }
 .help-body::-webkit-scrollbar { width: 6px; }
 .help-body::-webkit-scrollbar-track { background: transparent; }
-.help-body::-webkit-scrollbar-thumb { border-radius: 3px; background: #3a455e; }
+.help-body::-webkit-scrollbar-thumb { border-radius: 3px; background: var(--ui-scrollbar); }
-.help-body::-webkit-scrollbar-thumb:hover { background: #596683; }
+.help-body::-webkit-scrollbar-thumb:hover { background: var(--ui-scrollbar-hover); }
-.help-section { padding: 14px 15px; border: 1px solid #2c3850; border-radius: 10px; background: #181f2e; }
+.help-section { padding: 14px 15px; border: 1px solid var(--ui-border-strong); border-radius: 10px; background: var(--ui-surface-soft); }
-.help-section h3 { margin: 0 0 11px; color: #9fb2ff; font-size: 13px; }
+.help-section h3 { margin: 0 0 11px; color: var(--ui-accent-text-muted); font-size: 13px; }
-.help-start ol { margin: 0; padding-left: 21px; color: #aab6cc; font-size: 12px; line-height: 1.75; }
+.help-start ol { margin: 0; padding-left: 21px; color: var(--ui-text-body); font-size: 12px; line-height: 1.75; }
-.help-start li::marker { color: #7774ff; font-weight: 700; }
+.help-start li::marker { color: var(--ui-accent-strong); font-weight: 700; }
-.help-section b { color: #dce4f7; }
+.help-section b { color: var(--ui-text-strong); }
 .help-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(250px, .85fr); gap: 12px; margin-top: 12px; }
 .help-list { display: grid; gap: 0; margin: 0; }
-.help-list > div { display: grid; grid-template-columns: 78px 1fr; gap: 9px; padding: 7px 0; border-bottom: 1px solid #263146; }
+.help-list > div { display: grid; grid-template-columns: 78px 1fr; gap: 9px; padding: 7px 0; border-bottom: 1px solid var(--ui-border-subtle); }
 .help-list > div:last-child { border-bottom: 0; }
-.help-list dt { color: #d3dcf0; font-size: 11px; font-weight: 700; }
+.help-list dt { color: var(--ui-text-strong); font-size: 11px; font-weight: 700; }
-.help-list dd { margin: 0; color: #8795ae; font-size: 11px; line-height: 1.5; }
+.help-list dd { margin: 0; color: var(--ui-text-faint); font-size: 11px; line-height: 1.5; }
 .shortcut-list { display: grid; gap: 7px; }
 .shortcut-list > div { display: flex; align-items: center; min-height: 25px; gap: 5px; }
 .shortcut-list kbd {
-  min-width: 24px; box-sizing: border-box; padding: 3px 6px; border: 1px solid #465470; border-bottom-width: 2px;
+  min-width: 24px; box-sizing: border-box; padding: 3px 6px; border: 1px solid var(--ui-border-strong); border-bottom-width: 2px;
-  border-radius: 5px; background: #101623; color: #e0e7f6; font: 10px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; text-align: center;
+  border-radius: 5px; background: var(--ui-control-deep); color: var(--ui-text-strong); font: 10px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; text-align: center;
 }
-.shortcut-list span { color: #65728b; font-size: 10px; }
+.shortcut-list span { color: var(--ui-text-faint); font-size: 10px; }
-.shortcut-list em { margin-left: auto; color: #9ca9c1; font-size: 11px; font-style: normal; }
+.shortcut-list em { margin-left: auto; color: var(--ui-text-secondary); font-size: 11px; font-style: normal; }
-.help-note { margin: 11px 0 0; padding-top: 9px; border-top: 1px solid #2a3549; color: #697791; font-size: 10px; line-height: 1.55; }
+.help-note { margin: 11px 0 0; padding-top: 9px; border-top: 1px solid var(--ui-border-subtle); color: var(--ui-text-faint); font-size: 10px; line-height: 1.55; }
 .help-export { margin-top: 12px; }
-.help-export p { margin: 0; color: #8997b0; font-size: 11px; line-height: 1.65; }
+.help-export p { margin: 0; color: var(--ui-text-faint); font-size: 11px; line-height: 1.65; }
 .help-updates { display: grid; gap: 10px; }
 .release-card { padding: 0; overflow: hidden; }
 .release-head {
   display: flex; width: 100%; align-items: center; gap: 11px; padding: 14px 15px; border: 0;
-  background: transparent; color: #d3dcf0; font: inherit; font-size: 12px; text-align: left; cursor: pointer;
+  background: transparent; color: var(--ui-text-strong); font: inherit; font-size: 12px; text-align: left; cursor: pointer;
 }
 .release-head time {
-  flex: 0 0 auto; padding: 3px 7px; border-radius: 5px; background: #30395a;
+  flex: 0 0 auto; padding: 3px 7px; border-radius: 5px; background: var(--ui-accent-soft);
-  color: #b8c2ff; font-size: 10px; font-weight: 700;
+  color: var(--ui-accent-text-soft); font-size: 10px; font-weight: 700;
 }
 .release-head span { flex: 1; min-width: 0; font-weight: 700; }
-.release-head b { color: #7b86a2; font-size: 12px; font-weight: 400; }
+.release-head b { color: var(--ui-text-faint); font-size: 12px; font-weight: 400; }
-.release-head:hover, .release-card.open .release-head { background: #1d2638; color: #fff; }
+.release-head:hover, .release-card.open .release-head { background: var(--ui-nav-hover); color: #fff; }
-.release-card.open .release-head b { color: #9fb2ff; }
+.release-card.open .release-head b { color: var(--ui-accent-text-muted); }
-.release-body { margin: 0 15px; padding: 12px 0 14px; border-top: 1px solid #2a3549; }
+.release-body { margin: 0 15px; padding: 12px 0 14px; border-top: 1px solid var(--ui-border-subtle); }
-.release-body p { margin: 0; color: #9ba9c2; font-size: 12px; line-height: 1.7; }
+.release-body p { margin: 0; color: var(--ui-text-faint); font-size: 12px; line-height: 1.7; }
-.release-body ol { display: grid; gap: 7px; margin: 8px 0 0; padding-left: 21px; color: #9ba9c2; font-size: 12px; line-height: 1.7; }
+.release-body ol { display: grid; gap: 7px; margin: 8px 0 0; padding-left: 21px; color: var(--ui-text-faint); font-size: 12px; line-height: 1.7; }
-.release-body li::marker { color: #8f9eff; font-weight: 700; }
+.release-body li::marker { color: var(--ui-accent-text-muted); font-weight: 700; }
-.help-doc-title { margin: 16px 2px 2px; color: #9fb2ff; font-size: 13px; font-weight: 700; letter-spacing: .5px; }
+.help-doc-title { margin: 16px 2px 2px; color: var(--ui-accent-text-muted); font-size: 13px; font-weight: 700; letter-spacing: .5px; }
 .help-module { margin-top: 12px; }
 .help-module-head {
   display: flex; align-items: center; gap: 8px; width: 100%; padding: 0; border: 0; background: transparent;
-  color: #9fb2ff; font: inherit; font-size: 13px; font-weight: 700; text-align: left; cursor: pointer;
+  color: var(--ui-accent-text-muted); font: inherit; font-size: 13px; font-weight: 700; text-align: left; cursor: pointer;
 }
 .help-module-head:hover { color: #fff; }
 .help-module-head .mtitle { flex: 1; min-width: 0; }
-.help-module-head .caret { flex: 0 0 auto; color: #7b86a2; font-size: 12px; }
+.help-module-head .caret { flex: 0 0 auto; color: var(--ui-text-faint); font-size: 12px; }
 .help-module.open .help-module-head { color: #fff; }
-.help-module.open .help-module-head .caret { color: #9fb2ff; }
+.help-module.open .help-module-head .caret { color: var(--ui-accent-text-muted); }
 .help-module .mnum {
   flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
   width: 22px; height: 22px; border-radius: 6px;
-  background: linear-gradient(135deg, #4a53b8, #6a5fd0); color: #fff; font-size: 12px; font-weight: 700;
+  background: linear-gradient(135deg, var(--ui-accent-button), var(--ui-accent-button)); color: #fff; font-size: 12px; font-weight: 700;
 }
-.help-module.help-connector { border-color: #4a4f8a; background: linear-gradient(135deg, #1d2442, #181d2f); }
+.help-module.help-connector { border-color: var(--ui-accent-soft); background: linear-gradient(135deg, var(--ui-accent-soft), var(--ui-surface-soft)); }
-.help-module.help-connector .help-module-head { color: #b8c2ff; }
+.help-module.help-connector .help-module-head { color: var(--ui-accent-text-soft); }
-.help-module .connector-intro { margin: 0 0 10px; color: #9aa8c4; font-size: 11px; line-height: 1.6; }
+.help-module .connector-intro { margin: 0 0 10px; color: var(--ui-text-body); font-size: 11px; line-height: 1.6; }
-.help-module .connector-intro b { color: #dce4f7; }
+.help-module .connector-intro b { color: var(--ui-text-strong); }
 .help-module .dl-link {
   display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px; margin: 0 10px 6px 0; padding: 6px 12px;
-  border: 1px solid #5652b5; border-radius: 6px; background: #4540a0; color: #fff; font-size: 12px; font-weight: 700; text-decoration: none;
+  border: 1px solid var(--ui-accent-button); border-radius: 6px; background: var(--ui-accent-bg); color: #fff; font-size: 12px; font-weight: 700; text-decoration: none;
 }
-.help-module .dl-link:hover { border-color: #8982ff; background: #554dc2; }
+.help-module .dl-link:hover { border-color: var(--ui-accent-bright); background: var(--ui-accent-bg-hover); }
-.help-module .dl-link small { color: #cfe0ff; font-weight: 500; font-size: 9px; }
+.help-module .dl-link small { color: var(--ui-accent-text-soft); font-weight: 500; font-size: 9px; }
 .help-module-body { padding-top: 10px; }
 @media (max-width: 760px) {
   .help-overlay { padding: 66px 12px 14px; }

src/views/ImageResourceCard.vue

@@ -274,58 +274,58 @@ function changeImageMode(event: Event) {
 </script>
 
 <style scoped>
-.image-card { margin: 8px 0; padding: 9px; border: 1px solid #2e3c55; border-radius: 7px; background: #171d2a; }
+.image-card { margin: 8px 0; padding: 9px; border: 1px solid var(--ui-border-strong); border-radius: 7px; background: var(--ui-surface); }
 .imgrow { display: flex; align-items: flex-start; gap: 8px; }
-.img-thumb { width: 48px; height: 48px; padding: 0; border: 1px solid #3a4963; border-radius: 6px; background: #1a2232; display: flex; align-items: center; justify-content: center; flex-shrink: 0; cursor: pointer; overflow: hidden; }
+.img-thumb { width: 48px; height: 48px; padding: 0; border: 1px solid var(--ui-border-button); border-radius: 6px; background: var(--ui-surface); display: flex; align-items: center; justify-content: center; flex-shrink: 0; cursor: pointer; overflow: hidden; }
-.img-thumb:hover { border-color: #7774ff; }
+.img-thumb:hover { border-color: var(--ui-accent-strong); }
 .img-thumb img { display: block; width: 100%; height: 100%; object-fit: contain; }
 .img-fields { flex: 1; min-width: 0; }
 .img-actions { display: flex; flex-direction: column; gap: 4px; }
-.row { display: flex; align-items: center; gap: 8px; margin: 6px 0; color: #aab; font-size: 12px; }
+.row { display: flex; align-items: center; gap: 8px; margin: 6px 0; color: var(--ui-text); font-size: 12px; }
-.row > span:first-child { width: 60px; flex-shrink: 0; color: #8a93bb; }
+.row > span:first-child { width: 60px; flex-shrink: 0; color: var(--ui-text-secondary); }
-.inp { min-width: 0; flex: 1; padding: 3px 5px; border: 1px solid #2e2e44; border-radius: 5px; background: #1a1a28; color: #dde; font-size: 12px; }
+.inp { min-width: 0; flex: 1; padding: 3px 5px; border: 1px solid var(--ui-border-control); border-radius: 5px; background: var(--ui-control-bg); color: var(--ui-text-strong); font-size: 12px; }
-.mini-btn2 { width: 26px; height: 24px; background: #1e1e2e; border: 1px solid #2e2e44; border-radius: 5px; color: #aab; font-size: 12px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
+.mini-btn2 { width: 26px; height: 24px; background: var(--ui-control-bg-alt); border: 1px solid var(--ui-border-control); border-radius: 5px; color: var(--ui-text); font-size: 12px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
-.mini-btn2:hover { background: #2b3a5c; }
+.mini-btn2:hover { background: var(--ui-control-active); }
 .mini-btn2:disabled { opacity: 0.35; cursor: not-allowed; }
-.thumb-note { margin: 4px 0 2px; color: #667; font-size: 11px; }
+.thumb-note { margin: 4px 0 2px; color: var(--ui-text-muted); font-size: 11px; }
-.sequence-pick { width: 100%; margin: 2px 0 4px; padding: 6px 8px; border: 1px solid #4a4a76; border-radius: 5px; background: #27264b; color: #d8d7ff; font-size: 12px; cursor: pointer; }
+.sequence-pick { width: 100%; margin: 2px 0 4px; padding: 6px 8px; border: 1px solid var(--ui-accent-soft); border-radius: 5px; background: var(--ui-accent-soft-bg); color: var(--ui-accent-text-soft); font-size: 12px; cursor: pointer; }
-.sequence-pick:hover { border-color: #7774ff; background: #35336a; }
+.sequence-pick:hover { border-color: var(--ui-accent-strong); background: var(--ui-accent-soft); }
-.sequence-note { margin: 0 0 6px; color: #727b9b; font-size: 11px; line-height: 1.4; }
+.sequence-note { margin: 0 0 6px; color: var(--ui-text-faint); font-size: 11px; line-height: 1.4; }
 .resource-weight-row { display: grid; grid-template-columns: minmax(0, 1fr) 28px; align-items: center; gap: 7px; }
 .resource-weight-control { width: 100%; min-width: 0; }
 .resource-weight-control :deep(.ns-range) { min-width: 0; }
 .resource-weight-control :deep(.ns-num) { flex: 0 0 56px; box-sizing: border-box; }
-.weight-lock { width: 28px; height: 26px; flex: 0 0 28px; padding: 5px; border: 1px solid #35435c; border-radius: 5px; background: #202a3b; color: #78859e; cursor: pointer; }
+.weight-lock { width: 28px; height: 26px; flex: 0 0 28px; padding: 5px; border: 1px solid var(--ui-border-strong); border-radius: 5px; background: var(--ui-button-surface); color: var(--ui-text-faint); cursor: pointer; }
 .weight-lock svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
-.weight-lock:hover:not(:disabled) { border-color: #7774ff; color: #b8b6ff; }
+.weight-lock:hover:not(:disabled) { border-color: var(--ui-accent-strong); color: var(--ui-accent-text-soft); }
-.weight-lock.on { border-color: #7774ff; background: #514fd0; color: #fff; }
+.weight-lock.on { border-color: var(--ui-accent-strong); background: var(--ui-accent-button); color: #fff; }
 .weight-lock:disabled { opacity: 0.35; cursor: not-allowed; }
-.pivot-toggle-row { display: flex; align-items: center; gap: 9px; margin-top: 9px; padding: 8px 9px; border: 1px solid #2c3a54; border-radius: 8px; background: #131b28; }
+.pivot-toggle-row { display: flex; align-items: center; gap: 9px; margin-top: 9px; padding: 8px 9px; border: 1px solid var(--ui-border-strong); border-radius: 8px; background: var(--ui-surface); }
-.pivot-toggle-icon { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex: 0 0 32px; border: 1px solid #35435c; border-radius: 7px; background: #1c2638; color: #8f8cff; font-size: 17px; }
+.pivot-toggle-icon { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex: 0 0 32px; border: 1px solid var(--ui-border-strong); border-radius: 7px; background: var(--ui-surface-soft); color: var(--ui-accent-text-soft); font-size: 17px; }
 .pivot-toggle-text { flex: 1; min-width: 0; }
-.pivot-toggle-title { color: #d6deee; font-size: 12px; font-weight: 600; }
+.pivot-toggle-title { color: var(--ui-text-strong); font-size: 12px; font-weight: 600; }
-.pivot-toggle-sub { margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #7584a0; font-size: 9px; }
+.pivot-toggle-sub { margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ui-text-faint); font-size: 9px; }
 .pivot-switch { position: relative; flex: 0 0 auto; cursor: pointer; }
 .pivot-switch input { position: absolute; opacity: 0; pointer-events: none; }
-.pivot-switch-ui { position: relative; display: block; width: 34px; height: 19px; border-radius: 10px; background: #354258; transition: background .16s ease; }
+.pivot-switch-ui { position: relative; display: block; width: 34px; height: 19px; border-radius: 10px; background: var(--ui-switch-off); transition: background .16s ease; }
 .pivot-switch-ui::after { content: ''; position: absolute; left: 2px; top: 2px; width: 15px; height: 15px; border-radius: 50%; background: #fff; transition: transform .16s ease; }
-.pivot-switch input:checked + .pivot-switch-ui { background: #625ff1; }
+.pivot-switch input:checked + .pivot-switch-ui { background: var(--ui-accent); }
 .pivot-switch input:checked + .pivot-switch-ui::after { transform: translateX(15px); }
 
-.pivot-modal-backdrop { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(6, 9, 15, .78); backdrop-filter: blur(2px); }
+.pivot-modal-backdrop { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 24px; background: var(--ui-backdrop-strong); backdrop-filter: blur(2px); }
-.pivot-modal { display: flex; flex-direction: column; width: min(980px, 94vw); max-height: 92vh; overflow: auto; padding: 14px; border: 1px solid #2f3f5c; border-radius: 14px; background: #121927; box-shadow: 0 24px 70px rgba(0, 0, 0, .6); }
+.pivot-modal { display: flex; flex-direction: column; width: min(980px, 94vw); max-height: 92vh; overflow: auto; padding: 14px; border: 1px solid var(--ui-border-strong); border-radius: 14px; background: var(--ui-surface); box-shadow: 0 24px 70px rgba(0, 0, 0, .6); }
-.pivot-modal-head { display: flex; align-items: flex-start; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid #253148; }
+.pivot-modal-head { display: flex; align-items: flex-start; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--ui-border-subtle); }
-.pivot-modal-icon { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex: 0 0 34px; border: 1px solid #3b4a66; border-radius: 8px; background: #1c2638; color: #8f8cff; font-size: 18px; }
+.pivot-modal-icon { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex: 0 0 34px; border: 1px solid var(--ui-border-strong); border-radius: 8px; background: var(--ui-surface-soft); color: var(--ui-accent-text-soft); font-size: 18px; }
 .pivot-modal-info { flex: 1; min-width: 0; }
-.pivot-modal-title { display: flex; align-items: center; gap: 7px; color: #e4e9f5; font-size: 15px; font-weight: 700; }
+.pivot-modal-title { display: flex; align-items: center; gap: 7px; color: var(--ui-text-strong); font-size: 15px; font-weight: 700; }
-.pivot-modal-badge { padding: 2px 7px; border: 1px solid #4b4a8f; border-radius: 999px; background: #2c2b58; color: #b9b6ff; font-size: 10px; font-weight: 500; }
+.pivot-modal-badge { padding: 2px 7px; border: 1px solid var(--ui-accent-soft); border-radius: 999px; background: var(--ui-accent-soft-bg); color: var(--ui-accent-text-soft); font-size: 10px; font-weight: 500; }
-.pivot-modal-desc { margin-top: 3px; color: #7f8daa; font-size: 11px; }
+.pivot-modal-desc { margin-top: 3px; color: var(--ui-text-faint); font-size: 11px; }
-.pivot-modal-close { width: 28px; height: 28px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: #8b98b3; font-size: 15px; cursor: pointer; }
+.pivot-modal-close { width: 28px; height: 28px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--ui-text-faint); font-size: 15px; cursor: pointer; }
-.pivot-modal-close:hover { background: #253148; color: #fff; }
+.pivot-modal-close:hover { background: var(--ui-border-subtle); color: #fff; }
-.pivot-modal-hint { margin: 10px 0 0; color: #8b98b3; font-size: 11px; }
+.pivot-modal-hint { margin: 10px 0 0; color: var(--ui-text-faint); font-size: 11px; }
-.pivot-modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; padding-top: 10px; border-top: 1px solid #253148; }
+.pivot-modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--ui-border-subtle); }
-.pivot-modal-cancel { height: 34px; padding: 0 16px; border: 1px solid #34435e; border-radius: 7px; background: #1a2334; color: #a9b6d0; font-size: 12px; cursor: pointer; }
+.pivot-modal-cancel { height: 34px; padding: 0 16px; border: 1px solid var(--ui-border-strong); border-radius: 7px; background: var(--ui-surface); color: var(--ui-text-body); font-size: 12px; cursor: pointer; }
-.pivot-modal-cancel:hover { border-color: #5d5aa8; color: #fff; }
+.pivot-modal-cancel:hover { border-color: var(--ui-accent); color: #fff; }
-.pivot-modal-confirm { height: 34px; padding: 0 22px; border: 1px solid #7774ff; border-radius: 7px; background: #5b57e8; color: #fff; font-size: 12px; font-weight: 700; cursor: pointer; }
+.pivot-modal-confirm { height: 34px; padding: 0 22px; border: 1px solid var(--ui-accent-strong); border-radius: 7px; background: var(--ui-accent-button); color: #fff; font-size: 12px; font-weight: 700; cursor: pointer; }
-.pivot-modal-confirm:hover { background: #6a66ff; }
+.pivot-modal-confirm:hover { background: var(--ui-accent-strong); }
 </style>

src/views/LanguagePicker.vue

@@ -124,36 +124,36 @@ onUnmounted(() => document.removeEventListener('pointerdown', onDocumentPointerD
 <style scoped>
 .language-picker {
   display: flex; height: 28px; align-items: center; gap: 6px; margin-left: auto;
-  color: #9aa8c1; font-size: 11px; white-space: nowrap;
+  color: var(--ui-text-body); font-size: 11px; white-space: nowrap;
 }
 .language-dropdown { position: relative; }
 .language-trigger {
   display: flex; height: 28px; min-width: 88px; align-items: center; gap: 7px; padding: 0 8px;
-  border: 1px solid #3a4963; border-radius: 6px; outline: none;
+  border: 1px solid var(--ui-border-button); border-radius: 6px; outline: none;
-  background: #202a3b; color: #dbe4f5; font: inherit; font-size: 11px; cursor: pointer;
+  background: var(--ui-button-surface); color: var(--ui-text-strong); font: inherit; font-size: 11px; cursor: pointer;
 }
-.language-trigger:hover, .language-trigger.open { border-color: #5b608c; background: #2b3a5c; }
+.language-trigger:hover, .language-trigger.open { border-color: var(--ui-accent-strong); background: var(--ui-control-active); }
-.language-trigger:focus-visible { border-color: #7774ff; }
+.language-trigger:focus-visible { border-color: var(--ui-accent-strong); }
 .language-flag-icon, .language-option-flag-icon {
   display: block; width: 22px; height: 15px; flex: 0 0 auto; overflow: hidden;
   border-radius: 2px; box-shadow: 0 0 0 1px rgba(255,255,255,.12);
 }
-.language-short { min-width: 20px; color: #dbe4f5; font-size: 11px; font-weight: 600; }
+.language-short { min-width: 20px; color: var(--ui-text-strong); font-size: 11px; font-weight: 600; }
-.language-chevron { width: 10px; height: 6px; margin-left: auto; fill: none; stroke: #aab; stroke-width: 1.7; transition: transform .15s ease; }
+.language-chevron { width: 10px; height: 6px; margin-left: auto; fill: none; stroke: var(--ui-text); stroke-width: 1.7; transition: transform .15s ease; }
 .language-trigger.open .language-chevron { transform: rotate(180deg); }
 .language-menu {
   position: absolute; right: 0; bottom: calc(100% + 6px); z-index: 30;
   width: 190px; max-height: min(360px, calc(100vh - 120px)); overflow-y: auto;
-  padding: 5px; border: 1px solid #343b50; border-radius: 9px;
+  padding: 5px; border: 1px solid var(--ui-border-control); border-radius: 9px;
-  background: rgba(20,20,32,.98); box-shadow: 0 8px 24px rgba(0,0,0,.48);
+  background: var(--ui-popover-bg); box-shadow: 0 8px 24px rgba(0,0,0,.48);
 }
 .menu-down .language-menu { top: calc(100% + 6px); bottom: auto; }
 .language-option {
   display: grid; width: 100%; min-height: 38px; grid-template-columns: 24px 1fr 16px; align-items: center;
   gap: 8px; padding: 0 7px; border: 0; border-radius: 6px;
-  background: transparent; color: #aeb8cc; font: inherit; font-size: 12px; text-align: left; white-space: nowrap; cursor: pointer;
+  background: transparent; color: var(--ui-text-body); font: inherit; font-size: 12px; text-align: left; white-space: nowrap; cursor: pointer;
 }
-.language-option:hover, .language-option:focus-visible { outline: none; background: #2b3a5c; color: #fff; }
+.language-option:hover, .language-option:focus-visible { outline: none; background: var(--ui-control-active); color: #fff; }
-.language-option.selected { background: #343b63; color: #fff; }
+.language-option.selected { background: var(--ui-accent-soft-bg); color: #fff; }
 .language-check { justify-self: end; color: #fff; font-size: 18px; font-weight: 500; }
 </style>

src/views/NumSlider.vue

@@ -60,10 +60,10 @@ function onBlur() {
 </script>
 
 <style scoped>
-.ns { display: flex; align-items: center; gap: 8px; margin: 6px 0; font-size: 12px; color: #aab; }
+.ns { display: flex; align-items: center; gap: 8px; margin: 6px 0; font-size: 12px; color: var(--ui-text); }
-.ns-label { width: 60px; flex-shrink: 0; color: #8a93bb; }
+.ns-label { width: 60px; flex-shrink: 0; color: var(--ui-text-secondary); }
-.ns-range { flex: 1; accent-color: #3a7cd6; }
+.ns-range { flex: 1; accent-color: var(--ui-accent-strong); }
-.ns-num { width: 56px; padding: 3px 5px; background: #1a1a28; border: 1px solid #2e2e44; border-radius: 5px; color: #dde; font-size: 12px; text-align: right; }
+.ns-num { width: 56px; padding: 3px 5px; background: var(--ui-control-bg); border: 1px solid var(--ui-border-control); border-radius: 5px; color: var(--ui-text-strong); font-size: 12px; text-align: right; }
 .ns.disabled { opacity: 0.55; }
 .ns.disabled .ns-range, .ns.disabled .ns-num { cursor: not-allowed; }
 </style>

src/views/ParticleAttributeControl.vue

@@ -94,15 +94,15 @@ const modeItems = computed(() => {
 </script>
 
 <style scoped>
-.pac { padding: 10px; margin: 8px 0; border: 1px solid #2c3850; border-radius: 7px; background: #171d2a; }
+.pac { padding: 10px; margin: 8px 0; border: 1px solid var(--ui-border-strong); border-radius: 7px; background: var(--ui-surface); }
 .pac-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 7px; }
-.pac-label { color: #aeb8cf; font-size: 12px; font-weight: 600; white-space: nowrap; }
+.pac-label { color: var(--ui-text-body); font-size: 12px; font-weight: 600; white-space: nowrap; }
 .pac-modes { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
-.pac-mode { padding: 4px 7px; border: 1px solid #344158; border-radius: 5px; background: #273246; color: #aeb8cf; font-size: 11px; cursor: pointer; }
+.pac-mode { padding: 4px 7px; border: 1px solid var(--ui-border-strong); border-radius: 5px; background: var(--ui-control-hover); color: var(--ui-text-body); font-size: 11px; cursor: pointer; }
-.pac-mode.on { border-color: #7774ff; background: #605df0; color: #fff; }
+.pac-mode.on { border-color: var(--ui-accent-strong); background: var(--ui-accent); color: #fff; }
 .pac-curve { margin-top: 8px; }
-.pac-axis { display: flex; justify-content: space-between; margin-top: 3px; color: #5f6b82; font-size: 10px; }
+.pac-axis { display: flex; justify-content: space-between; margin-top: 3px; color: var(--ui-text-faint); font-size: 10px; }
 .pac :deep(.ns-label) { width: 58px; }
-.pac :deep(.ce-svg) { height: 96px; background: #0f1625; border-color: #30405a; }
+.pac :deep(.ce-svg) { height: 96px; background: var(--ui-control-deep); border-color: var(--ui-border-strong); }
-.pac :deep(.ce-tip) { color: #657188; }
+.pac :deep(.ce-tip) { color: var(--ui-text-faint); }
 </style>

src/views/ParticlePanel.vue

@@ -86,19 +86,19 @@ watch(renderedSection, async () => {
 </script>
 
 <style scoped>
-.panel { display: flex; width: 100%; height: 100%; flex-direction: column; overflow: hidden; background: #14141f; border-left: 1px solid #2a2a3c; padding: 12px; box-sizing: border-box; }
+.panel { display: flex; width: 100%; height: 100%; flex-direction: column; overflow: hidden; background: var(--ui-panel-bg); border-left: 1px solid var(--ui-border); padding: 12px; box-sizing: border-box; }
-.panel-scroll { min-height: 0; flex: 1; overflow-y: auto; overscroll-behavior: contain; padding-right: 2px; scrollbar-width: thin; scrollbar-color: #2e2e44 transparent; }
+.panel-scroll { min-height: 0; flex: 1; overflow-y: auto; overscroll-behavior: contain; padding-right: 2px; scrollbar-width: thin; scrollbar-color: var(--ui-border-control) transparent; }
 .panel-scroll::-webkit-scrollbar { width: 6px; }
 .panel-scroll::-webkit-scrollbar-track { background: transparent; }
-.panel-scroll::-webkit-scrollbar-thumb { background: #2e2e44; border-radius: 3px; }
+.panel-scroll::-webkit-scrollbar-thumb { background: var(--ui-border-control); border-radius: 3px; }
-.panel-scroll::-webkit-scrollbar-thumb:hover { background: #3a3a55; }
+.panel-scroll::-webkit-scrollbar-thumb:hover { background: var(--ui-border-strong); }
-.panel-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; flex: 0 0 auto; font-weight: 700; color: #ccd; }
+.panel-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; flex: 0 0 auto; font-weight: 700; color: var(--ui-text-soft); }
 .panel-collapse {
-  height: 27px; padding: 0 11px; border: 1px solid #3d465b; border-radius: 6px;
+  height: 27px; padding: 0 11px; border: 1px solid var(--ui-border-button); border-radius: 6px;
-  background: #202533; color: #cbd3e2; font: inherit; font-size: 11px; font-weight: 600; cursor: pointer;
+  background: var(--ui-surface); color: var(--ui-text-body); font: inherit; font-size: 11px; font-weight: 600; cursor: pointer;
 }
-.panel-collapse:hover { border-color: #7774ff; background: #303650; color: #fff; }
+.panel-collapse:hover { border-color: var(--ui-accent-strong); background: var(--ui-control-active); color: #fff; }
-.panel-collapse:focus-visible { outline: 2px solid #8b86ff; outline-offset: 1px; }
+.panel-collapse:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 1px; }
 .section-detail :deep(.group-head) { cursor: default; }
 .section-detail :deep(.group-head .caret) { visibility: hidden; }
 </style>

src/views/PivotEditor.vue

@@ -313,28 +313,28 @@ onBeforeUnmount(() => {
 </script>
 
 <style scoped>
-.pivot-editor { margin-top: 8px; padding: 8px; border: 1px solid #2e3c55; border-radius: 8px; background: #121a27; }
+.pivot-editor { margin-top: 8px; padding: 8px; border: 1px solid var(--ui-border-strong); border-radius: 8px; background: var(--ui-surface); }
 .pivot-toolbar { display: flex; align-items: center; gap: 7px; margin-bottom: 7px; }
-.pivot-hint { flex: 1; min-width: 0; display: flex; align-items: center; gap: 5px; color: #9aa8c4; font-size: 10px; line-height: 1.3; }
+.pivot-hint { flex: 1; min-width: 0; display: flex; align-items: center; gap: 5px; color: var(--ui-text-body); font-size: 10px; line-height: 1.3; }
-.pivot-hint-icon { color: #8f8cff; font-size: 13px; }
+.pivot-hint-icon { color: var(--ui-accent-text-soft); font-size: 13px; }
-.pivot-zoom { display: flex; align-items: center; gap: 2px; padding: 2px; border: 1px solid #34435e; border-radius: 6px; background: #182234; }
+.pivot-zoom { display: flex; align-items: center; gap: 2px; padding: 2px; border: 1px solid var(--ui-border-strong); border-radius: 6px; background: var(--ui-surface); }
-.pivot-zoom button { width: 20px; height: 20px; padding: 0; border: 0; border-radius: 4px; background: transparent; color: #a9b6d0; font-size: 13px; cursor: pointer; }
+.pivot-zoom button { width: 20px; height: 20px; padding: 0; border: 0; border-radius: 4px; background: transparent; color: var(--ui-text-body); font-size: 13px; cursor: pointer; }
-.pivot-zoom button:hover:not(:disabled) { background: #2a3853; color: #fff; }
+.pivot-zoom button:hover:not(:disabled) { background: var(--ui-control-hover); color: #fff; }
 .pivot-zoom button:disabled { opacity: .3; cursor: default; }
-.pivot-zoom span { min-width: 36px; text-align: center; color: #c7d1e6; font-size: 10px; font-variant-numeric: tabular-nums; }
+.pivot-zoom span { min-width: 36px; text-align: center; color: var(--ui-text-body); font-size: 10px; font-variant-numeric: tabular-nums; }
-.pivot-expand { width: 24px; height: 24px; padding: 0; border: 1px solid #34435e; border-radius: 6px; background: #182234; color: #a9b6d0; font-size: 13px; cursor: pointer; }
+.pivot-expand { width: 24px; height: 24px; padding: 0; border: 1px solid var(--ui-border-strong); border-radius: 6px; background: var(--ui-surface); color: var(--ui-text-body); font-size: 13px; cursor: pointer; }
-.pivot-expand:hover { border-color: #7774ff; color: #fff; }
+.pivot-expand:hover { border-color: var(--ui-accent-strong); color: #fff; }
 
 .pivot-stage {
   position: relative; display: flex; align-items: center; justify-content: center;
   width: 100%; height: 156px; overflow: hidden;
-  border: 1px solid #2f3d57; border-radius: 8px;
+  border: 1px solid var(--ui-border-strong); border-radius: 8px;
-  background-color: #10161f;
+  background-color: var(--ui-control-deep);
   background-image:
-    linear-gradient(45deg, #1a2230 25%, transparent 25%),
+    linear-gradient(45deg, var(--ui-surface) 25%, transparent 25%),
-    linear-gradient(-45deg, #1a2230 25%, transparent 25%),
+    linear-gradient(-45deg, var(--ui-surface) 25%, transparent 25%),
-    linear-gradient(45deg, transparent 75%, #1a2230 75%),
+    linear-gradient(45deg, transparent 75%, var(--ui-surface) 75%),
-    linear-gradient(-45deg, transparent 75%, #1a2230 75%);
+    linear-gradient(-45deg, transparent 75%, var(--ui-surface) 75%);
   background-size: 16px 16px;
   background-position: 0 0, 0 8px, 8px -8px, -8px 0;
   touch-action: none; cursor: crosshair;
@@ -343,46 +343,46 @@ onBeforeUnmount(() => {
 .pivot-stage.panning { cursor: grabbing; }
 .pivot-box { position: relative; flex: 0 0 auto; }
 .pivot-box > img { display: block; width: 100%; height: 100%; object-fit: fill; user-select: none; pointer-events: none; }
-.pivot-empty { color: #4e5a70; font-size: 12px; }
+.pivot-empty { color: var(--ui-text-faint); font-size: 12px; }
-.pivot-cross { position: absolute; pointer-events: none; background: rgba(126, 118, 255, .75); box-shadow: 0 0 3px rgba(126, 118, 255, .6); }
+.pivot-cross { position: absolute; pointer-events: none; background: var(--ui-accent-cross); box-shadow: 0 0 3px var(--ui-accent-cross); }
 .pivot-cross.vertical { top: 0; bottom: 0; width: 1px; transform: translateX(-.5px); }
 .pivot-cross.horizontal { left: 0; right: 0; height: 1px; transform: translateY(-.5px); }
 .pivot-marker {
   position: absolute; width: 13px; height: 13px; transform: translate(-50%, -50%);
-  border: 2px solid #c9c6ff; border-radius: 50%;
+  border: 2px solid var(--ui-accent-text-soft); border-radius: 50%;
-  background: rgba(96, 95, 240, .85);
+  background: var(--ui-accent-overlay);
-  box-shadow: 0 0 0 3px rgba(96, 95, 240, .28), 0 0 10px rgba(96, 95, 240, .8);
+  box-shadow: 0 0 0 3px var(--ui-accent-halo), 0 0 10px var(--ui-accent-glow);
   pointer-events: none;
 }
 .pivot-badge {
   position: absolute; transform: translate(-50%, 14px);
-  padding: 2px 6px; border: 1px solid #6f6bc7; border-radius: 4px;
+  padding: 2px 6px; border: 1px solid var(--ui-accent-strong); border-radius: 4px;
-  background: rgba(25, 28, 58, .92); color: #b9b6ff;
+  background: var(--ui-accent-soft); color: var(--ui-accent-text-soft);
   font-size: 9px; white-space: nowrap; pointer-events: none;
 }
 
 .pivot-bottom { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; margin-top: 8px; }
 .pivot-large .pivot-bottom { gap: 14px; margin-top: 14px; }
-.pivot-card { min-width: 0; padding: 7px; border: 1px solid #28344a; border-radius: 8px; background: #151d2b; }
+.pivot-card { min-width: 0; padding: 7px; border: 1px solid var(--ui-control-hover); border-radius: 8px; background: var(--ui-surface); }
-.pivot-card-head { display: flex; align-items: center; justify-content: space-between; gap: 5px; margin-bottom: 6px; color: #b9c4da; font-size: 10px; }
+.pivot-card-head { display: flex; align-items: center; justify-content: space-between; gap: 5px; margin-bottom: 6px; color: var(--ui-text-body); font-size: 10px; }
-.pivot-card-icon { color: #8f8cff; }
+.pivot-card-icon { color: var(--ui-accent-text-soft); }
 .pivot-presets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
-.pivot-preset { height: 30px; padding: 0; border: 1px solid #2f3d57; border-radius: 5px; background: #1b2537; color: #aab6cf; font-size: 16px; line-height: 1; cursor: pointer; }
+.pivot-preset { height: 30px; padding: 0; border: 1px solid var(--ui-border-strong); border-radius: 5px; background: var(--ui-surface); color: var(--ui-text-body); font-size: 16px; line-height: 1; cursor: pointer; }
-.pivot-preset:hover { border-color: #5d5aa8; color: #d9d8ff; }
+.pivot-preset:hover { border-color: var(--ui-accent); color: var(--ui-accent-text-soft); }
-.pivot-preset.on { border-color: #7774ff; background: #4a47b5; color: #fff; }
+.pivot-preset.on { border-color: var(--ui-accent-strong); background: var(--ui-accent-button); color: #fff; }
-.pivot-reset { display: block; width: 100%; height: 26px; margin-top: 6px; padding: 0 6px; border: 1px solid #2f3d57; border-radius: 5px; background: #1a2435; color: #96a4c0; font-size: 10px; cursor: pointer; white-space: nowrap; }
+.pivot-reset { display: block; width: 100%; height: 26px; margin-top: 6px; padding: 0 6px; border: 1px solid var(--ui-border-strong); border-radius: 5px; background: var(--ui-surface); color: var(--ui-text-body); font-size: 10px; cursor: pointer; white-space: nowrap; }
-.pivot-reset:hover { border-color: #5d5aa8; background: #232f46; color: #d9d8ff; }
+.pivot-reset:hover { border-color: var(--ui-accent); background: var(--ui-control-hover); color: var(--ui-accent-text-soft); }
 .pivot-coords { display: flex; flex-direction: column; gap: 5px; }
 .pivot-large .pivot-coords { flex-direction: row; gap: 8px; }
-.pivot-coords label { flex: 1; display: flex; align-items: center; gap: 3px; color: #8d9ab5; font-size: 10px; }
+.pivot-coords label { flex: 1; display: flex; align-items: center; gap: 3px; color: var(--ui-text-faint); font-size: 10px; }
-.pivot-coords input { width: 100%; min-width: 0; height: 24px; padding: 0 4px; border: 1px solid #34435e; border-radius: 4px; background: #101827; color: #f0b465; font-size: 11px; text-align: right; }
+.pivot-coords input { width: 100%; min-width: 0; height: 24px; padding: 0 4px; border: 1px solid var(--ui-border-strong); border-radius: 4px; background: var(--ui-control-deep); color: #f0b465; font-size: 11px; text-align: right; }
 .pivot-rotate-head { margin-top: 10px; }
-.pivot-rotate-state { color: #6f7c96; font-size: 9px; }
+.pivot-rotate-state { color: var(--ui-text-faint); font-size: 9px; }
 .pivot-rotate-body { display: flex; align-items: center; gap: 7px; }
 .pivot-rotate-modes { display: flex; flex-direction: column; gap: 4px; flex: 1; }
-.pivot-rotate-modes button { height: 24px; padding: 0 5px; border: 1px solid #2f3d57; border-radius: 5px; background: #1b2537; color: #93a0ba; font-size: 9px; cursor: pointer; }
+.pivot-rotate-modes button { height: 24px; padding: 0 5px; border: 1px solid var(--ui-border-strong); border-radius: 5px; background: var(--ui-surface); color: var(--ui-text-secondary); font-size: 9px; cursor: pointer; }
-.pivot-rotate-modes button.on { border-color: #7774ff; background: #4a47b5; color: #fff; }
+.pivot-rotate-modes button.on { border-color: var(--ui-accent-strong); background: var(--ui-accent-button); color: #fff; }
-.pivot-rotate-preview { display: flex; align-items: center; justify-content: center; width: 78px; height: 78px; flex: 0 0 78px; border: 1px solid #2b374d; border-radius: 6px; background: #10161f; overflow: hidden; }
+.pivot-rotate-preview { display: flex; align-items: center; justify-content: center; width: 78px; height: 78px; flex: 0 0 78px; border: 1px solid var(--ui-border-strong); border-radius: 6px; background: var(--ui-control-deep); overflow: hidden; }
 .pivot-large .pivot-rotate-preview { width: 128px; height: 128px; flex-basis: 128px; }
 .pivot-rotate-preview img { display: block; }
 .pivot-rotate-preview img.spin { animation: pivot-spin 2s linear infinite; }

src/views/Stage.vue

@@ -56,7 +56,7 @@ import { ParticleEmitter, ensureEmitterConfig, type ParticleState } from '../cor
 import { bakeLoopFrames } from '../core/loopFrameBaker'
 import { loopPlaybackRange } from '../core/loopSegmentTiming'
 import { collectSubEmitterIds } from '../core/subEmitterIds'
-import { useParticleStore, type CollisionBody, type ParticleSystem } from '../store/particleStore'
+import { useParticleStore, type CollisionBody, type ParticleSystem, type UiTheme } from '../store/particleStore'
 import { SpineRuntimeLayer } from '../spine/SpineRuntimeLayer'
 import { editorHistoryState, installEditorHistory, undoLastOperation } from '../editor/editorHistory'
 import { useEditorShortcuts } from '../editor/useEditorShortcuts'
@@ -97,6 +97,12 @@ if (!(store.settings.bonePointDrawSize > 0)) store.settings.bonePointDrawSize =
 if (!(store.settings.boneAxisDrawSize > 0)) store.settings.boneAxisDrawSize = 2
 if (store.settings.showSkinMesh == null) store.settings.showSkinMesh = false
 if (store.settings.showGrid == null) store.settings.showGrid = true
+if (store.settings.uiTheme !== 'gray-white' && store.settings.uiTheme !== 'deep-blue') store.settings.uiTheme = 'deep-blue'
+
+const CANVAS_THEMES: Record<UiTheme, { background: number; grid: number }> = {
+  'deep-blue': { background: 0x0e1219, grid: 0x141a26 },
+  'gray-white': { background: 0x4b4d51, grid: 0x55585d },
+}
 
 let app: Application | null = null
 let stageResizeObserver: ResizeObserver | null = null
@@ -141,10 +147,11 @@ function createLayers() {
   const checker = document.createElement('canvas')
   checker.width = checker.height = 28
   const checkerContext = checker.getContext('2d')!
-  checkerContext.fillStyle = '#141a26'
+  checkerContext.fillStyle = '#fff'
   checkerContext.fillRect(14, 0, 14, 14)
   checkerContext.fillRect(0, 14, 14, 14)
   canvasGrid = new TilingSprite(Texture.from(checker), app!.screen.width, app!.screen.height)
+  canvasGrid.tint = CANVAS_THEMES[store.settings.uiTheme].grid
   canvasGrid.visible = store.settings.showGrid
   app!.stage.addChild(canvasGrid)
   world = new Container()
@@ -194,6 +201,12 @@ function onPanDown(e: PointerEvent) {
   panView(stageContext, e.clientX, e.clientY)
 }
 
+function applyCanvasTheme() {
+  const palette = CANVAS_THEMES[store.settings.uiTheme]
+  if (app) app.renderer.background.color = palette.background
+  if (canvasGrid) canvasGrid.tint = palette.grid
+}
+
 function onStageDoubleClick(e: MouseEvent) {
   pathEditing.onStageDoubleClick(e)
 }
@@ -618,7 +631,7 @@ onMounted(async () => {
   app = new Application({
     width: el.clientWidth || 800,
     height: el.clientHeight || 600,
-    backgroundColor: 0x0e1219,
+    backgroundColor: CANVAS_THEMES[store.settings.uiTheme].background,
     backgroundAlpha: 1,
     antialias: true,
   })
@@ -642,6 +655,7 @@ onMounted(async () => {
   watch(() => store.settings.showGrid, (visible) => {
     if (canvasGrid) canvasGrid.visible = visible
   })
+  watch(() => store.settings.uiTheme, applyCanvasTheme)
   const textures = await loadDefaultTextures()
   dotTex = textures.dotTex
   trailTex = textures.trailTex
@@ -713,12 +727,12 @@ watch(() => [store.activeObjectType, store.activeObjectId], () => pathEditing.re
 .stage-home-btn {
   position: absolute; top: 14px; left: calc(24px + clamp(105px, 13.5vw, 150px)); z-index: 2;
   display: grid; width: 32px; height: 32px; padding: 7px; place-items: center;
-  border: 1px solid rgba(66, 77, 99, .76); border-radius: 7px;
+  border: 1px solid var(--ui-border-translucent); border-radius: 7px;
-  background: rgba(15, 18, 27, .8); color: #aeb8cc; cursor: pointer;
+  background: var(--ui-overlay-soft); color: var(--ui-text-body); cursor: pointer;
   backdrop-filter: blur(6px);
 }
 .stage-home-btn.home-right { left: auto; right: calc(24px + clamp(105px, 13.5vw, 150px)); }
-.stage-home-btn:hover { border-color: #7774ff; background: rgba(43, 58, 92, .92); color: #fff; }
+.stage-home-btn:hover { border-color: var(--ui-accent-strong); background: var(--ui-control-active); color: #fff; }
-.stage-home-btn:focus-visible { outline: 2px solid #8b86ff; outline-offset: 2px; }
+.stage-home-btn:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 2px; }
 .stage-home-btn svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; }
 </style>

src/views/StageSettingsPanel.vue

@@ -41,6 +41,12 @@ function normalizeBoneDebugSizes() {
 <template>
   <div v-if="show" ref="panelRef" class="settings-panel" data-matomo-section="settings" tabindex="-1" @focusout="onFocusOut">
     <div class="sp-head">{{ t('settings.title') }} <button class="sp-close" @click="emit('close')">✕</button></div>
+    <label class="sp-row sp-theme-row"><span>{{ t('settings.interfaceStyle') }}</span>
+      <select v-model="store.settings.uiTheme" class="sp-select" :aria-label="t('settings.interfaceStyle')">
+        <option value="deep-blue">{{ t('settings.deepBlueStyle') }}</option>
+        <option value="gray-white">{{ t('settings.grayWhiteStyle') }}</option>
+      </select>
+    </label>
     <div class="sp-section-title">{{ t('settings.layout') }}</div>
     <label class="sp-switch-row">
       <span>{{ t('settings.parameterPanelPosition') }}</span>
@@ -125,32 +131,34 @@ function normalizeBoneDebugSizes() {
 <style scoped>
 .settings-panel {
   position: absolute; bottom: 92px; left: 10px; width: 240px; z-index: 30;
-  background: rgba(20,20,32,0.97); border: 1px solid #2a2a3c; border-radius: 10px; padding: 10px 12px;
+  background: var(--ui-panel-overlay); border: 1px solid var(--ui-border); border-radius: 10px; padding: 10px 12px;
-  font-size: 12px; color: #aab; box-shadow: 0 6px 20px rgba(0,0,0,0.4);
+  font-size: 12px; color: var(--ui-text); box-shadow: 0 6px 20px rgba(0,0,0,0.4);
 }
 .settings-panel:focus { outline: none; }
-.sp-head { display: flex; justify-content: space-between; align-items: center; font-weight: 700; color: #cdf; margin-bottom: 10px; }
+.sp-head { display: flex; justify-content: space-between; align-items: center; font-weight: 700; color: var(--ui-accent-text-muted); margin-bottom: 10px; }
-.sp-section-title { margin: 2px 0 8px; color: #8a93bb; font-size: 11px; }
+.sp-section-title { margin: 2px 0 8px; color: var(--ui-text-secondary); font-size: 11px; }
-.sp-switch-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: #aab; }
+.sp-switch-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--ui-text); }
 .sp-switch-row > span:first-child { min-width: 0; flex: 1; }
 .sp-switch-row + .sp-switch-row { margin-top: 9px; }
 .sp-switch-control { display: inline-flex; align-items: center; gap: 7px; }
 .sp-switch-control input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
-.sp-switch-ui { position: relative; width: 34px; height: 18px; border-radius: 999px; background: #39445a; cursor: pointer; transition: background .16s ease; }
+.sp-switch-ui { position: relative; width: 34px; height: 18px; border-radius: 999px; background: var(--ui-switch-off); cursor: pointer; transition: background .16s ease; }
-.sp-switch-ui::after { content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #f4f6fb; transition: transform .16s ease; }
+.sp-switch-ui::after { content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--ui-text-primary); transition: transform .16s ease; }
-.sp-switch-control input:checked + .sp-switch-ui { background: #655df0; }
+.sp-switch-control input:checked + .sp-switch-ui { background: var(--ui-accent); }
 .sp-switch-control input:checked + .sp-switch-ui::after { transform: translateX(16px); }
-.sp-switch-control input:focus-visible + .sp-switch-ui { outline: 2px solid #8b86ff; outline-offset: 2px; }
+.sp-switch-control input:focus-visible + .sp-switch-ui { outline: 2px solid var(--ui-focus); outline-offset: 2px; }
-.sp-switch-control b { min-width: 24px; color: #8a93bb; font-size: 11px; font-weight: 500; }
+.sp-switch-control b { min-width: 24px; color: var(--ui-text-secondary); font-size: 11px; font-weight: 500; }
-.sp-cache-note { margin-top: 10px; padding-top: 9px; border-top: 1px solid #2a2a3c; color: #647089; font-size: 10px; text-align: center; }
+.sp-cache-note { margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--ui-border); color: var(--ui-text-faint); font-size: 10px; text-align: center; }
-.sp-divider { height: 1px; margin: 10px 0; background: #2a2a3c; }
+.sp-divider { height: 1px; margin: 10px 0; background: var(--ui-border); }
-.sp-close { background: #2e3a55; border: none; color: #cdf; border-radius: 4px; width: 18px; height: 18px; cursor: pointer; font-size: 11px; }
+.sp-close { background: var(--ui-border-strong); border: none; color: var(--ui-accent-text-muted); border-radius: 4px; width: 18px; height: 18px; cursor: pointer; font-size: 11px; }
 .sp-row { display: flex; align-items: center; gap: 8px; margin: 8px 0; }
-.sp-row > span:first-child { width: 76px; flex-shrink: 0; color: #8a93bb; }
+.sp-row > span:first-child { width: 76px; flex-shrink: 0; color: var(--ui-text-secondary); }
-.sp-row input[type=range] { flex: 1; background: #1a1a28; accent-color: #3a5a8c; }
+.sp-row input[type=range] { flex: 1; background: var(--ui-control-bg); accent-color: var(--ui-selected-bg); }
-.sp-num { width: 52px; background: #1a1a28; border: 1px solid #2e2e44; border-radius: 5px; color: #dde; font-size: 12px; padding: 2px 4px; }
+.sp-num { width: 52px; background: var(--ui-control-bg); border: 1px solid var(--ui-border-control); border-radius: 5px; color: var(--ui-text-strong); font-size: 12px; padding: 2px 4px; }
+.sp-theme-row { margin-top: 0; }
+.sp-select { min-width: 96px; height: 26px; padding: 0 6px; border: 1px solid var(--ui-border-control); border-radius: 5px; background: var(--ui-control-bg); color: var(--ui-text-strong); font: inherit; }
 .sp-undo-limit { margin-left: auto; width: 64px; height: 26px; box-sizing: border-box; }
 .sp-colr { width: 26px; height: 22px; border: none; background: none; cursor: pointer; }
-.sp-hex { font-size: 11px; color: #889; font-variant-numeric: tabular-nums; }
+.sp-hex { font-size: 11px; color: var(--ui-text-muted); font-variant-numeric: tabular-nums; }
-.sp-chk { display: flex; align-items: center; gap: 6px; margin: 8px 0; color: #aab; }
+.sp-chk { display: flex; align-items: center; gap: 6px; margin: 8px 0; color: var(--ui-text); }
 </style>

src/views/StageToolbar.vue

@@ -135,17 +135,17 @@ function undo() {
 <style scoped>
 .topbar {
   display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
-  font-size: 12px; color: #aab;
+  font-size: 12px; color: var(--ui-text);
 }
 .top-operation-stack {
   position: relative; z-index: 20; flex: 0 0 auto;
   display: flex; flex-direction: column; gap: 6px; padding: 8px 12px;
-  background: #12121c;
+  background: var(--ui-chrome-bg);
 }
 .top-operation-stack::before,
 .top-operation-stack::after {
   position: absolute; top: 0; width: calc(50% - 48px); height: 1px;
-  background: #2a2a3c; content: "";
+  background: var(--ui-border); content: "";
 }
 .top-operation-stack::before { left: 0; }
 .top-operation-stack::after { right: 0; }
@@ -153,43 +153,43 @@ function undo() {
   min-width: 0;
 }
 .timeline-controls-row {
-  position: relative; min-width: 0; padding-top: 6px; border-top: 1px solid #2a2a3c;
+  position: relative; min-width: 0; padding-top: 6px; border-top: 1px solid var(--ui-border);
 }
 .stage-hud {
   position: absolute; right: 42px; top: 6px; bottom: 0;
-  display: flex; align-items: center; color: #8390ab; font-size: 10px; line-height: 1;
+  display: flex; align-items: center; color: var(--ui-text-faint); font-size: 10px; line-height: 1;
   white-space: nowrap; pointer-events: none;
 }
 .hud-number { display: inline-block; box-sizing: border-box; text-align: right; font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }
 .hud-system-count { width: 3ch; }
 .hud-particle-count { width: 7ch; text-align: left; }
-.hud-tip { margin-left: 10px; color: #59657e; font-size: 10px; }
+.hud-tip { margin-left: 10px; color: var(--ui-text-faint); font-size: 10px; }
 b { color: #ffcc33; }
-.topbar input[type=range] { background: #1a1a28; border: 1px solid #2e2e44; color: #dde; border-radius: 5px; }
+.topbar input[type=range] { background: var(--ui-control-bg); border: 1px solid var(--ui-border-control); color: var(--ui-text-strong); border-radius: 5px; }
 /* 工具按钮组 */
-.tool-group { display: flex; gap: 6px; margin-left: 6px; padding-left: 12px; border-left: 1px solid #2a2a3c; }
+.tool-group { display: flex; gap: 6px; margin-left: 6px; padding-left: 12px; border-left: 1px solid var(--ui-border); }
 .tool-btn {
-  width: 30px; height: 26px; background: #1e1e2e; border: 1px solid #2e2e44; border-radius: 6px;
+  width: 30px; height: 26px; background: var(--ui-control-bg-alt); border: 1px solid var(--ui-border-control); border-radius: 6px;
-  color: #aab; font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center;
+  color: var(--ui-text); font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center;
 }
-.tool-btn:hover { background: #2b3a5c; color: #fff; }
+.tool-btn:hover { background: var(--ui-control-active); color: #fff; }
-.tool-btn.on { background: #3a5a8c; color: #fff; border-color: #5a7ab8; }
+.tool-btn.on { background: var(--ui-selected-bg); color: #fff; border-color: var(--ui-selected-border); }
 .background-menu { position: relative; flex: 0 0 auto; }
 .background-btn {
-  height: 28px; padding: 0 11px; border: 1px solid #3a4963; border-radius: 6px;
+  height: 28px; padding: 0 11px; border: 1px solid var(--ui-border-button); border-radius: 6px;
-  background: #202a3b; color: #cbd7ed; font-size: 12px; cursor: pointer;
+  background: var(--ui-button-surface); color: var(--ui-text-strong); font-size: 12px; cursor: pointer;
 }
-.background-btn:hover, .background-btn.on { border-color: #7774ff; background: #343b63; color: #fff; }
+.background-btn:hover, .background-btn.on { border-color: var(--ui-accent-strong); background: var(--ui-accent-soft-bg); color: #fff; }
 .background-panel {
   position: absolute; right: 0; bottom: calc(100% + 9px); width: 248px; box-sizing: border-box; padding: 10px;
-  border: 1px solid #343b50; border-radius: 9px; background: rgba(20,20,32,.98); color: #aeb8cc;
+  border: 1px solid var(--ui-border-control); border-radius: 9px; background: var(--ui-popover-bg); color: var(--ui-text-body);
   box-shadow: 0 8px 24px rgba(0,0,0,.48); z-index: 12;
 }
 .background-upload {
-  width: 100%; height: 30px; border: 1px solid #5652b5; border-radius: 6px;
+  width: 100%; height: 30px; border: 1px solid var(--ui-accent-button); border-radius: 6px;
-  background: #4540a0; color: #fff; cursor: pointer;
+  background: var(--ui-accent-bg); color: #fff; cursor: pointer;
 }
-.background-upload:hover { border-color: #8982ff; background: #554dc2; }
+.background-upload:hover { border-color: var(--ui-accent-bright); background: var(--ui-accent-bg-hover); }
 .background-clear {
   width: 100%; height: 28px; margin-top: 6px; border: 1px solid #70404a; border-radius: 6px;
   background: #512a33; color: #efb5bd; cursor: pointer;
@@ -197,31 +197,31 @@ b { color: #ffcc33; }
 .background-clear:hover:not(:disabled) { border-color: #b65b6a; background: #6a303b; color: #fff; }
 .background-clear:disabled { opacity: .42; cursor: not-allowed; }
 .background-file-input { display: none; }
-.background-file-name { margin: 7px 2px 9px; overflow: hidden; color: #737f98; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
+.background-file-name { margin: 7px 2px 9px; overflow: hidden; color: var(--ui-text-faint); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
 .background-position-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
-.background-position-row label { display: flex; align-items: center; gap: 5px; color: #8995ad; font-size: 11px; }
+.background-position-row label { display: flex; align-items: center; gap: 5px; color: var(--ui-text-faint); font-size: 11px; }
 .background-position-row input {
   width: 0; min-width: 0; flex: 1; box-sizing: border-box; height: 28px; padding: 0 6px;
-  border: 1px solid #343e55; border-radius: 5px; background: #101522; color: #e1e6f2;
+  border: 1px solid var(--ui-border-control); border-radius: 5px; background: var(--ui-control-deep); color: var(--ui-text-strong);
 }
 .background-opacity-row { display: grid; grid-template-columns: 46px 1fr 34px; align-items: center; gap: 7px; margin-top: 10px; font-size: 11px; }
-.background-opacity-row input { min-width: 0; accent-color: #675de0; }
+.background-opacity-row input { min-width: 0; accent-color: var(--ui-accent); }
-.background-opacity-row b { color: #aeb8cc; font-size: 10px; text-align: right; font-variant-numeric: tabular-nums; }
+.background-opacity-row b { color: var(--ui-text-body); font-size: 10px; text-align: right; font-variant-numeric: tabular-nums; }
 .help-btn {
-  height: 28px; padding: 0 11px; flex: 0 0 auto; border: 1px solid #3a4963; border-radius: 6px;
+  height: 28px; padding: 0 11px; flex: 0 0 auto; border: 1px solid var(--ui-border-button); border-radius: 6px;
-  background: #202a3b; color: #cbd7ed; font-size: 12px; font-weight: 700; cursor: pointer;
+  background: var(--ui-button-surface); color: var(--ui-text-strong); font-size: 12px; font-weight: 700; cursor: pointer;
 }
-.help-btn:hover, .help-btn.on { border-color: #7774ff; background: #343b63; color: #fff; }
+.help-btn:hover, .help-btn.on { border-color: var(--ui-accent-strong); background: var(--ui-accent-soft-bg); color: #fff; }
-.zoom-pct { margin-left: 0; font-variant-numeric: tabular-nums; color: #9aa; min-width: 44px; text-align: center; }
+.zoom-pct { margin-left: 0; font-variant-numeric: tabular-nums; color: var(--ui-text); min-width: 44px; text-align: center; }
 .settings-btn {
-  height: 28px; padding: 0 12px; flex: 0 0 auto; border: 1px solid #3a4963; border-radius: 6px;
+  height: 28px; padding: 0 12px; flex: 0 0 auto; border: 1px solid var(--ui-border-button); border-radius: 6px;
-  background: #202a3b; color: #cdf; font-size: 12px; font-weight: 700; cursor: pointer;
+  background: var(--ui-button-surface); color: var(--ui-accent-text-muted); font-size: 12px; font-weight: 700; cursor: pointer;
 }
-.settings-btn:hover { border-color: #7774ff; background: #2b3a5c; color: #fff; }
+.settings-btn:hover { border-color: var(--ui-accent-strong); background: var(--ui-control-active); color: #fff; }
 .undo-btn {
-  width: 30px; height: 28px; flex: 0 0 30px; border: 1px solid #3a4963; border-radius: 6px;
+  width: 30px; height: 28px; flex: 0 0 30px; border: 1px solid var(--ui-border-button); border-radius: 6px;
-  background: #202a3b; color: #cdd8ed; font-size: 18px; line-height: 1; cursor: pointer;
+  background: var(--ui-button-surface); color: var(--ui-text-body); font-size: 18px; line-height: 1; cursor: pointer;
 }
-.undo-btn:hover:not(:disabled) { border-color: #7774ff; background: #2b3a5c; color: #fff; }
+.undo-btn:hover:not(:disabled) { border-color: var(--ui-accent-strong); background: var(--ui-control-active); color: #fff; }
 .undo-btn:disabled { opacity: .38; cursor: not-allowed; }
 </style>

src/views/Timeline.vue

@@ -524,89 +524,89 @@ function onSpineBarDown(e: PointerEvent, spine: SpineSceneObject) {
 </script>
 
 <style scoped>
-.timeline { height: 100%; background: #12121c; border-top: 1px solid #2a2a3c; display: flex; flex-direction: column; padding: 6px 10px; gap: 4px; }
+.timeline { height: 100%; background: var(--ui-chrome-bg); border-top: 1px solid var(--ui-border); display: flex; flex-direction: column; padding: 6px 10px; gap: 4px; }
 .tl-controls { display: flex; width: 100%; align-items: center; gap: 8px; flex-wrap: wrap; }
-.tl-btn { width: 30px; height: 26px; background: #1e1e2e; border: 1px solid #2e2e44; border-radius: 6px; color: #aab; font-size: 12px; cursor: pointer; }
+.tl-btn { width: 30px; height: 26px; background: var(--ui-control-bg-alt); border: 1px solid var(--ui-border-control); border-radius: 6px; color: var(--ui-text); font-size: 12px; cursor: pointer; }
-.tl-btn.on { background: #3a5a8c; color: #fff; border-color: #5a7ab8; }
+.tl-btn.on { background: var(--ui-selected-bg); color: #fff; border-color: var(--ui-selected-border); }
 .tl-ab-loop { position: relative; }
-.tl-ab-toggle { display: flex; height: 26px; align-items: center; gap: 7px; padding: 0 7px; border: 1px solid #343a51; border-radius: 6px; background: #1e1e2e; color: #8f98ad; font-size: 10px; cursor: pointer; }
+.tl-ab-toggle { display: flex; height: 26px; align-items: center; gap: 7px; padding: 0 7px; border: 1px solid var(--ui-border-control); border-radius: 6px; background: var(--ui-control-bg-alt); color: var(--ui-text-faint); font-size: 10px; cursor: pointer; }
-.tl-ab-toggle.on { border-color: #716eff; background: #2e2d50; color: #eef; }
+.tl-ab-toggle.on { border-color: var(--ui-accent-strong); background: var(--ui-accent-soft); color: var(--ui-text-soft); }
-.tl-switch { position: relative; width: 22px; height: 12px; border-radius: 99px; background: #343a4b; }
+.tl-switch { position: relative; width: 22px; height: 12px; border-radius: 99px; background: var(--ui-border-control); }
-.tl-switch b { position: absolute; top: 2px; left: 2px; width: 8px; height: 8px; border-radius: 50%; background: #8992a5; transition: transform .15s ease, background .15s ease; }
+.tl-switch b { position: absolute; top: 2px; left: 2px; width: 8px; height: 8px; border-radius: 50%; background: var(--ui-text-secondary); transition: transform .15s ease, background .15s ease; }
-.tl-ab-toggle.on .tl-switch { background: #716eff; }
+.tl-ab-toggle.on .tl-switch { background: var(--ui-accent-strong); }
 .tl-ab-toggle.on .tl-switch b { transform: translateX(10px); background: #fff; }
-.tl-ab-popover { position: absolute; z-index: 40; left: 0; bottom: calc(100% + 8px); display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 1px solid #4b4c73; border-radius: 8px; background: #171724; box-shadow: 0 10px 26px rgba(0,0,0,.5); }
+.tl-ab-popover { position: absolute; z-index: 40; left: 0; bottom: calc(100% + 8px); display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 1px solid var(--ui-border-strong); border-radius: 8px; background: var(--ui-surface); box-shadow: 0 10px 26px rgba(0,0,0,.5); }
-.tl-ab-title { color: #b7bdd2; font-size: 10px; white-space: nowrap; }
+.tl-ab-title { color: var(--ui-text-body); font-size: 10px; white-space: nowrap; }
-.tl-range { display: flex; height: 25px; align-items: center; gap: 3px; color: #778198; font-size: 10px; }
+.tl-range { display: flex; height: 25px; align-items: center; gap: 3px; color: var(--ui-text-faint); font-size: 10px; }
-.tl-range input { width: 43px; height: 25px; padding: 0 5px; box-sizing: border-box; border: 1px solid #3a3a51; border-radius: 5px; outline: none; background: #181824; color: #e1e4ed; font-size: 11px; text-align: center; }
+.tl-range input { width: 43px; height: 25px; padding: 0 5px; box-sizing: border-box; border: 1px solid var(--ui-border-control); border-radius: 5px; outline: none; background: var(--ui-control-bg); color: var(--ui-text-strong); font-size: 11px; text-align: center; }
-.tl-range input:focus { border-color: #716eff; }
+.tl-range input:focus { border-color: var(--ui-accent-strong); }
-.tl-frame { display: inline-block; flex: 0 0 92px; width: 92px; box-sizing: border-box; font-size: 12px; color: #aab; text-align: right; font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; white-space: nowrap; }
+.tl-frame { display: inline-block; flex: 0 0 92px; width: 92px; box-sizing: border-box; font-size: 12px; color: var(--ui-text); text-align: right; font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; white-space: nowrap; }
 .tl-frame b { display: inline; color: inherit; font-weight: 400; }
-.tl-legend { display: flex; align-items: center; gap: 4px; color: #778198; font-size: 10px; }
+.tl-legend { display: flex; align-items: center; gap: 4px; color: var(--ui-text-faint); font-size: 10px; }
 .tl-legend i { display: inline-block; width: 10px; height: 7px; border-radius: 2px; }
 .legend-emission { margin-left: 4px; background: #2f8b62; }
 .legend-life { margin-left: 5px; background: #a54551; }
 .legend-spine { margin-left: 5px; background: #7448b8; }
-.tl-anim { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #aab; }
+.tl-anim { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ui-text); }
 .tl-owner-animation { position: relative; }
 .tl-animation-trigger {
   display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 116px; height: 25px; padding: 0 7px;
-  overflow: hidden; border: 1px solid #2e2e44; border-radius: 5px; background: #1a1a28; color: #dde; cursor: pointer;
+  overflow: hidden; border: 1px solid var(--ui-border-control); border-radius: 5px; background: var(--ui-control-bg); color: var(--ui-text-strong); cursor: pointer;
 }
 .tl-animation-trigger > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.tl-animation-trigger > i { flex: 0 0 auto; color: #8c96ad; font-style: normal; }
+.tl-animation-trigger > i { flex: 0 0 auto; color: var(--ui-text-faint); font-style: normal; }
 .tl-animation-trigger:disabled { opacity: .5; cursor: not-allowed; }
 .tl-animation-menu {
   position: absolute; z-index: 30; right: 0; bottom: calc(100% + 6px); width: 226px; padding: 7px;
-  border: 1px solid #3c4760; border-radius: 8px; background: #171b29; box-shadow: 0 10px 24px rgba(0,0,0,.45);
+  border: 1px solid var(--ui-border-strong); border-radius: 8px; background: var(--ui-surface); box-shadow: 0 10px 24px rgba(0,0,0,.45);
 }
-.tl-animation-menu-title { padding: 2px 4px 6px; color: #77839c; font-size: 10px; }
+.tl-animation-menu-title { padding: 2px 4px 6px; color: var(--ui-text-faint); font-size: 10px; }
 .tl-animation-option {
   display: flex; align-items: center; justify-content: space-between; width: 100%; height: 27px; padding: 0 7px;
-  border: 0; border-radius: 5px; background: transparent; color: #b8c1d5; text-align: left; cursor: pointer;
+  border: 0; border-radius: 5px; background: transparent; color: var(--ui-text-body); text-align: left; cursor: pointer;
 }
 .tl-animation-option > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.tl-animation-option:hover { background: #252e42; }
+.tl-animation-option:hover { background: var(--ui-nav-hover); }
-.tl-animation-option.on { background: #34335d; color: #fff; }
+.tl-animation-option.on { background: var(--ui-accent-soft); color: #fff; }
-.tl-animation-option > i { color: #8d8aff; font-style: normal; }
+.tl-animation-option > i { color: var(--ui-accent-text-muted); font-style: normal; }
-.tl-animation-editor { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px; margin-top: 7px; padding-top: 7px; border-top: 1px solid #2b3346; }
+.tl-animation-editor { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px; margin-top: 7px; padding-top: 7px; border-top: 1px solid var(--ui-border-subtle); }
-.tl-animation-name { min-width: 0; height: 27px; padding: 0 7px; box-sizing: border-box; border: 1px solid #343e55; border-radius: 5px; background: #101522; color: #e1e6f2; outline: none; }
+.tl-animation-name { min-width: 0; height: 27px; padding: 0 7px; box-sizing: border-box; border: 1px solid var(--ui-border-control); border-radius: 5px; background: var(--ui-control-deep); color: var(--ui-text-strong); outline: none; }
-.tl-animation-name:focus { border-color: #6865d8; }
+.tl-animation-name:focus { border-color: var(--ui-accent-strong); }
-.tl-animation-editor button, .tl-animation-actions button { height: 27px; padding: 0 8px; border: 1px solid #3c4861; border-radius: 5px; background: #29344a; color: #cbd3e3; cursor: pointer; }
+.tl-animation-editor button, .tl-animation-actions button { height: 27px; padding: 0 8px; border: 1px solid var(--ui-border-strong); border-radius: 5px; background: var(--ui-control-hover); color: var(--ui-text-body); cursor: pointer; }
 .tl-animation-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin-top: 6px; }
 .tl-animation-actions button:last-child { border-color: #5b3942; background: #3b282f; color: #e2a8b2; }
 .tl-animation-actions button:disabled { opacity: .4; cursor: not-allowed; }
 .tl-animation-error { margin-top: 5px; color: #ef8997; font-size: 10px; }
-.tl-animation-hint { margin-top: 5px; color: #69758d; font-size: 9px; text-align: center; }
+.tl-animation-hint { margin-top: 5px; color: var(--ui-text-faint); font-size: 9px; text-align: center; }
-.tl-sel { background: #1a1a28; border: 1px solid #2e2e44; color: #dde; border-radius: 5px; padding: 2px 6px; font-size: 12px; }
+.tl-sel { background: var(--ui-control-bg); border: 1px solid var(--ui-border-control); color: var(--ui-text-strong); border-radius: 5px; padding: 2px 6px; font-size: 12px; }
 .tl-sel:disabled { opacity: .5; cursor: not-allowed; }
 .tl-spine-preview .tl-sel { max-width: 190px; }
-.tl-zoom { margin-left: auto; font-size: 11px; color: #667; }
+.tl-zoom { margin-left: auto; font-size: 11px; color: var(--ui-text-muted); }
-.tl-viewport { position: relative; flex: 1; overflow: hidden; background: #0d0d14; border: 1px solid #2a2a3c; border-radius: 6px; cursor: ew-resize; }
+.tl-viewport { position: relative; flex: 1; overflow: hidden; background: var(--ui-sunken); border: 1px solid var(--ui-border); border-radius: 6px; cursor: ew-resize; }
 .tl-ticks { position: absolute; top: 0; left: 0; right: 0; height: 18px; }
-.tl-tickline { position: absolute; top: 0; bottom: 0; width: 1px; background: #263040; }
+.tl-tickline { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--ui-border-subtle); }
-.tl-ticklabel { position: absolute; top: 2px; transform: translateX(-50%); font-size: 9px; color: #667; }
+.tl-ticklabel { position: absolute; top: 2px; transform: translateX(-50%); font-size: 9px; color: var(--ui-text-muted); }
 .tl-playhead { position: absolute; top: 0; bottom: 0; width: 2px; background: #ffcc33; z-index: 5; pointer-events: none; }
 .tl-lanes {
   position: absolute; top: 22px; left: 0; right: 0; bottom: 0;
-  overflow-x: hidden; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #46516b #0d0d14;
+  overflow-x: hidden; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--ui-scrollbar) var(--ui-sunken);
 }
 .tl-lanes::-webkit-scrollbar { width: 8px; }
-.tl-lanes::-webkit-scrollbar-track { background: #0d0d14; }
+.tl-lanes::-webkit-scrollbar-track { background: var(--ui-sunken); }
-.tl-lanes::-webkit-scrollbar-thumb { border-radius: 4px; background: #46516b; }
+.tl-lanes::-webkit-scrollbar-thumb { border-radius: 4px; background: var(--ui-scrollbar); }
-.tl-lanes::-webkit-scrollbar-thumb:hover { background: #5d6a88; }
+.tl-lanes::-webkit-scrollbar-thumb:hover { background: var(--ui-scrollbar-hover); }
 .tl-lane { position: relative; height: 26px; margin-bottom: 4px; }
-.lane-ico { position: absolute; left: 4px; top: 6px; font-size: 11px; color: #dde; z-index: 2; pointer-events: none; }
+.lane-ico { position: absolute; left: 4px; top: 6px; font-size: 11px; color: var(--ui-text-strong); z-index: 2; pointer-events: none; }
-.lane-ico.sub-lane-ico { color: #7f8999; }
+.lane-ico.sub-lane-ico { color: var(--ui-text-faint); }
 .lane-bar { position: absolute; top: 4px; height: 18px; display: flex; align-items: stretch; cursor: grab; box-sizing: border-box; }
 .lane-bar:active { cursor: grabbing; }
 .lane-name { position: absolute; left: 14px; right: 5px; top: 2px; z-index: 2; pointer-events: none; font-size: 11px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .bar-life { position: absolute; inset: 0 auto 0 0; z-index: 0; min-width: 1px; border: 1px solid #c05a66; border-radius: 5px; background: #a54551; box-sizing: border-box; }
-.sub-emitter-bar .bar-life { border-color: #727d8f; background: #596274; }
+.sub-emitter-bar .bar-life { border-color: var(--ui-border-strong); background: var(--ui-surface-raised); }
-.bar-life.loop-life { border-color: #667085; background: #242b39; }
+.bar-life.loop-life { border-color: var(--ui-border-strong); background: var(--ui-surface); }
 .bar-emission { position: absolute; inset: 0 auto 0 0; z-index: 1; min-width: 1px; border: 1px solid #45a97d; border-radius: 5px 0 0 5px; background: #2f8b62; box-sizing: border-box; }
 .bar-emission.bar-loop { border-radius: 0; }
-.bar-loop-transition { position: absolute; top: 0; bottom: 0; z-index: 1; border: 1px solid #7d8799; background: #50596a; box-sizing: border-box; }
+.bar-loop-transition { position: absolute; top: 0; bottom: 0; z-index: 1; border: 1px solid var(--ui-text-secondary); background: var(--ui-surface-raised); box-sizing: border-box; }
 .bar-loop-start { left: 0; border-radius: 5px 0 0 5px; }
 .bar-loop-end { border-radius: 0 5px 5px 0; }
 .bar-handle { position: absolute; z-index: 4; right: -4px; top: -1px; bottom: -1px; width: 8px; cursor: ew-resize; background: rgba(255,255,255,0.18); }
@@ -618,5 +618,5 @@ function onSpineBarDown(e: PointerEvent, spine: SpineSceneObject) {
   box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
 }
 .spine-bar:active { cursor: grabbing; }
-.tl-empty { color: #667; font-size: 11px; padding: 8px; }
+.tl-empty { color: var(--ui-text-muted); font-size: 11px; padding: 8px; }
 </style>

src/views/TransferProgressOverlay.vue

@@ -48,14 +48,14 @@ watch(
 </script>
 
 <style scoped>
-.transfer-overlay { position: fixed; z-index: 2000; inset: 0; display: grid; place-items: center; pointer-events: auto; cursor: wait; overscroll-behavior: contain; background: rgba(5, 8, 15, 0.26); backdrop-filter: blur(1px); }
+.transfer-overlay { position: fixed; z-index: 2000; inset: 0; display: grid; place-items: center; pointer-events: auto; cursor: wait; overscroll-behavior: contain; background: var(--ui-backdrop-soft); backdrop-filter: blur(1px); }
-.transfer-dialog { width: min(420px, calc(100vw - 40px)); padding: 18px 20px 16px; border: 1px solid #414b66; border-radius: 10px; box-shadow: 0 18px 55px rgba(0, 0, 0, 0.46); background: #171d2b; color: #e7ebf5; }
+.transfer-dialog { width: min(420px, calc(100vw - 40px)); padding: 18px 20px 16px; border: 1px solid var(--ui-border-strong); border-radius: 10px; box-shadow: 0 18px 55px rgba(0, 0, 0, 0.46); background: var(--ui-surface); color: var(--ui-text-strong); }
 .transfer-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; font-size: 14px; font-weight: 700; }
-.transfer-heading strong { color: #a8a6ff; font-size: 12px; font-variant-numeric: tabular-nums; }
+.transfer-heading strong { color: var(--ui-accent-text-soft); font-size: 12px; font-variant-numeric: tabular-nums; }
-.transfer-track { height: 9px; overflow: hidden; border: 1px solid #35415a; border-radius: 999px; background: #0d1422; }
+.transfer-track { height: 9px; overflow: hidden; border: 1px solid var(--ui-border-strong); border-radius: 999px; background: var(--ui-control-deep); }
-.transfer-bar { height: 100%; border-radius: inherit; background: linear-gradient(90deg, #4d75e8, #7774ff); transition: width .16s ease; }
+.transfer-bar { height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--ui-accent-strong), var(--ui-accent-strong)); transition: width .16s ease; }
 .transfer-track.indeterminate .transfer-bar { width: 42%; animation: transfer-slide 1s ease-in-out infinite; }
-.transfer-detail { min-height: 17px; margin-top: 9px; color: #8895ae; font-size: 11px; line-height: 1.5; }
+.transfer-detail { min-height: 17px; margin-top: 9px; color: var(--ui-text-faint); font-size: 11px; line-height: 1.5; }
 .transfer-dialog.failed { border-color: #754351; }
 .transfer-dialog.failed .transfer-heading strong, .transfer-dialog.failed .transfer-detail { color: #e99aa9; }
 .transfer-dialog.failed .transfer-bar { background: #c85d70; }

src/views/particle-panel/EmissionSection.vue

@@ -140,47 +140,47 @@ const { store, sys, automaticLoopDuration, loopDurationFrames, collapsed, toggle
 </script>
 
 <style scoped>
-.group { border: 1px solid #2a2a3c; border-radius: 8px; margin-bottom: 10px; overflow: hidden; }
+.group { border: 1px solid var(--ui-border); border-radius: 8px; margin-bottom: 10px; overflow: hidden; }
 .group-head {
   display: flex; align-items: center; gap: 6px; padding: 7px 10px; cursor: pointer;
-  font-size: 12px; font-weight: 600; color: #ccd; background: #191924; user-select: none;
+  font-size: 12px; font-weight: 600; color: var(--ui-text-soft); background: var(--ui-surface-muted); user-select: none;
 }
-.group-head:hover { background: #20202e; }
+.group-head:hover { background: var(--ui-hover-surface); }
 .group-reset {
-  margin-left: auto; height: 22px; padding: 0 7px; border: 1px solid #3a465f; border-radius: 5px;
+  margin-left: auto; height: 22px; padding: 0 7px; border: 1px solid var(--ui-border-strong); border-radius: 5px;
-  background: #252d3d; color: #9eabc3; font-size: 10px; line-height: 20px; cursor: pointer;
+  background: var(--ui-surface-raised); color: var(--ui-text-body); font-size: 10px; line-height: 20px; cursor: pointer;
 }
-.group-reset:hover { border-color: #7774ff; background: #45426f; color: #fff; }
+.group-reset:hover { border-color: var(--ui-accent-strong); background: var(--ui-accent-soft); color: #fff; }
 .group-body { padding: 8px 10px 12px; }
-.caret { display: inline-block; width: 12px; color: #667; font-size: 11px; }
+.caret { display: inline-block; width: 12px; color: var(--ui-text-muted); font-size: 11px; }
-.divider { height: 1px; background: #2a2a3c; margin: 8px 0; }
+.divider { height: 1px; background: var(--ui-border); margin: 8px 0; }
-.row { display: flex; align-items: center; gap: 8px; margin: 6px 0; font-size: 12px; color: #aab; }
+.row { display: flex; align-items: center; gap: 8px; margin: 6px 0; font-size: 12px; color: var(--ui-text); }
-.row > span:first-child { width: 60px; flex-shrink: 0; color: #8a93bb; }
+.row > span:first-child { width: 60px; flex-shrink: 0; color: var(--ui-text-secondary); }
-.inp { flex: 1; min-width: 0; padding: 3px 5px; background: #1a1a28; border: 1px solid #2e2e44; border-radius: 5px; color: #dde; font-size: 12px; }
+.inp { flex: 1; min-width: 0; padding: 3px 5px; background: var(--ui-control-bg); border: 1px solid var(--ui-border-control); border-radius: 5px; color: var(--ui-text-strong); font-size: 12px; }
 .segs { display: flex; gap: 6px; margin: 6px 0; }
 .stream-behavior-segs { margin-top: 10px; }
-.stream-loop-options { display: grid; gap: 8px; margin: 8px 0 4px; padding: 9px 10px; border: 1px solid #32405a; border-radius: 6px; background: #171f2e; }
+.stream-loop-options { display: grid; gap: 8px; margin: 8px 0 4px; padding: 9px 10px; border: 1px solid var(--ui-border-strong); border-radius: 6px; background: var(--ui-surface); }
 .loop-section-row { display: flex; min-height: 27px; align-items: center; justify-content: space-between; gap: 8px; }
 .loop-duration-control { display: flex; flex: 0 0 auto; align-items: center; gap: 7px; }
 .loop-duration-toggle { gap: 5px; font-size: 10px; white-space: nowrap; }
 .loop-duration-toggle .switch-ui { width: 26px; height: 14px; }
 .loop-duration-toggle .switch-ui::after { width: 10px; height: 10px; }
 .loop-duration-toggle input:checked + .switch-ui::after { transform: translateX(12px); }
-.loop-section-duration { display: flex; flex: 0 0 auto; align-items: center; gap: 4px; color: #7f8ba4; font-size: 11px; }
+.loop-section-duration { display: flex; flex: 0 0 auto; align-items: center; gap: 4px; color: var(--ui-text-faint); font-size: 11px; }
-.loop-section-duration input { position: static; width: 54px; height: 25px; padding: 0 6px; border: 1px solid #3a465f; border-radius: 5px; outline: none; background: #101725; color: #e4e8f2; text-align: right; opacity: 1; pointer-events: auto; }
+.loop-section-duration input { position: static; width: 54px; height: 25px; padding: 0 6px; border: 1px solid var(--ui-border-strong); border-radius: 5px; outline: none; background: var(--ui-control-deep); color: var(--ui-text-strong); text-align: right; opacity: 1; pointer-events: auto; }
-.loop-section-duration input:focus { border-color: #716eff; }
+.loop-section-duration input:focus { border-color: var(--ui-accent-strong); }
-.loop-auto-duration { min-width: 54px; color: #77839a; text-align: right; white-space: nowrap; }
+.loop-auto-duration { min-width: 54px; color: var(--ui-text-faint); text-align: right; white-space: nowrap; }
-.seg { flex: 1; padding: 5px; background: #1e1e2e; border: 1px solid #2e2e44; border-radius: 6px; color: #aab; font-size: 12px; cursor: pointer; }
+.seg { flex: 1; padding: 5px; background: var(--ui-control-bg-alt); border: 1px solid var(--ui-border-control); border-radius: 6px; color: var(--ui-text); font-size: 12px; cursor: pointer; }
-.seg.on { background: #3a5a8c; color: #fff; border-color: #5a7ab8; }
+.seg.on { background: var(--ui-selected-bg); color: #fff; border-color: var(--ui-selected-border); }
 .seg { display: flex; gap: 6px; margin: 6px 0; }
 .inp.tiny { width: 46px; flex: 0 0 46px; text-align: center; }
-.switch-row { display: flex; align-items: center; gap: 9px; color: #b8c1d5; font-size: 12px; cursor: pointer; }
+.switch-row { display: flex; align-items: center; gap: 9px; color: var(--ui-text-body); font-size: 12px; cursor: pointer; }
 .switch-row input { position: absolute; opacity: 0; pointer-events: none; }
-.switch-ui { position: relative; width: 32px; height: 18px; border-radius: 10px; background: #354258; transition: background .16s ease; }
+.switch-ui { position: relative; width: 32px; height: 18px; border-radius: 10px; background: var(--ui-switch-off); transition: background .16s ease; }
 .switch-ui::after { content: ''; position: absolute; left: 2px; top: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: transform .16s ease; }
-.switch-row input:checked + .switch-ui { background: #625ff1; }
+.switch-row input:checked + .switch-ui { background: var(--ui-accent); }
 .switch-row input:checked + .switch-ui::after { transform: translateX(14px); }
-.modifier-hint { margin: 7px 0 0 2px; color: #647086; font-size: 9px; line-height: 1.5; }
+.modifier-hint { margin: 7px 0 0 2px; color: var(--ui-text-faint); font-size: 9px; line-height: 1.5; }
-.stream-loop-hint { margin: 9px 2px 3px; padding: 7px 8px; border: 1px solid #4a436e; border-radius: 5px; background: #211f35; color: #aaa4d7; }
+.stream-loop-hint { margin: 9px 2px 3px; padding: 7px 8px; border: 1px solid var(--ui-accent-soft); border-radius: 5px; background: var(--ui-accent-soft); color: var(--ui-accent-text-soft); }
 .switch-row input:disabled + .switch-ui { opacity: 0.45; cursor: not-allowed; }
 </style>

src/views/particle-panel/ExportSettingsSection.vue

@@ -75,41 +75,41 @@ const { exportSettings, collapsed, toggle, sectionOpen, resetModule, normalizeEx
 </script>
 
 <style scoped>
-.group { border: 1px solid #2a2a3c; border-radius: 8px; margin-bottom: 10px; overflow: hidden; }
+.group { border: 1px solid var(--ui-border); border-radius: 8px; margin-bottom: 10px; overflow: hidden; }
 .group-head {
   display: flex; align-items: center; gap: 6px; padding: 7px 10px; cursor: pointer;
-  font-size: 12px; font-weight: 600; color: #ccd; background: #191924; user-select: none;
+  font-size: 12px; font-weight: 600; color: var(--ui-text-soft); background: var(--ui-surface-muted); user-select: none;
 }
-.group-head:hover { background: #20202e; }
+.group-head:hover { background: var(--ui-hover-surface); }
 .group-reset {
-  margin-left: auto; height: 22px; padding: 0 7px; border: 1px solid #3a465f; border-radius: 5px;
+  margin-left: auto; height: 22px; padding: 0 7px; border: 1px solid var(--ui-border-strong); border-radius: 5px;
-  background: #252d3d; color: #9eabc3; font-size: 10px; line-height: 20px; cursor: pointer;
+  background: var(--ui-surface-raised); color: var(--ui-text-body); font-size: 10px; line-height: 20px; cursor: pointer;
 }
-.group-reset:hover { border-color: #7774ff; background: #45426f; color: #fff; }
+.group-reset:hover { border-color: var(--ui-accent-strong); background: var(--ui-accent-soft); color: #fff; }
 .group-body { padding: 8px 10px 12px; }
-.caret { display: inline-block; width: 12px; color: #667; font-size: 11px; }
+.caret { display: inline-block; width: 12px; color: var(--ui-text-muted); font-size: 11px; }
-.row { display: flex; align-items: center; gap: 8px; margin: 6px 0; font-size: 12px; color: #aab; }
+.row { display: flex; align-items: center; gap: 8px; margin: 6px 0; font-size: 12px; color: var(--ui-text); }
-.row > span:first-child { width: 60px; flex-shrink: 0; color: #8a93bb; }
+.row > span:first-child { width: 60px; flex-shrink: 0; color: var(--ui-text-secondary); }
-.inp { flex: 1; min-width: 0; padding: 3px 5px; background: #1a1a28; border: 1px solid #2e2e44; border-radius: 5px; color: #dde; font-size: 12px; }
+.inp { flex: 1; min-width: 0; padding: 3px 5px; background: var(--ui-control-bg); border: 1px solid var(--ui-border-control); border-radius: 5px; color: var(--ui-text-strong); font-size: 12px; }
-.placeholder { color: #667; font-size: 11px; padding: 6px 0; }
+.placeholder { color: var(--ui-text-muted); font-size: 11px; padding: 6px 0; }
 .export-settings { padding-top: 3px; }
-.export-field { display: flex; flex-direction: column; gap: 6px; margin: 10px 0 13px; color: #9ca8bf; font-size: 11px; font-weight: 600; }
+.export-field { display: flex; flex-direction: column; gap: 6px; margin: 10px 0 13px; color: var(--ui-text-secondary); font-size: 11px; font-weight: 600; }
-.export-input { width: 100%; min-height: 34px; box-sizing: border-box; padding: 6px 9px; color: #e3e7f2; background: #141a29; border-color: #35445f; }
+.export-input { width: 100%; min-height: 34px; box-sizing: border-box; padding: 6px 9px; color: var(--ui-text-strong); background: var(--ui-surface); border-color: var(--ui-border-strong); }
 .export-fps-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: end; }
 .export-fps-field { margin-bottom: 5px; }
-.export-checkbox { display: flex; align-items: center; gap: 7px; min-height: 34px; margin-bottom: 5px; color: #aeb8cc; font-size: 11px; white-space: nowrap; }
+.export-checkbox { display: flex; align-items: center; gap: 7px; min-height: 34px; margin-bottom: 5px; color: var(--ui-text-body); font-size: 11px; white-space: nowrap; }
-.export-checkbox input { width: 17px; height: 17px; margin: 0; accent-color: #625ff1; }
+.export-checkbox input { width: 17px; height: 17px; margin: 0; accent-color: var(--ui-accent); }
-.export-help { margin: -6px 0 14px; color: #66758e; font-size: 10px; line-height: 1.5; }
+.export-help { margin: -6px 0 14px; color: var(--ui-text-faint); font-size: 10px; line-height: 1.5; }
 .export-switches { display: grid; gap: 13px; margin: 4px 0 7px; padding-top: 2px; }
 .export-switch { font-weight: 600; }
 .export-switch-last { margin-top: 13px; }
-.export-resource-actions { margin-top: 14px; padding-top: 12px; border-top: 1px solid #2d3950; }
+.export-resource-actions { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--ui-border-strong); }
 .inp.tiny { width: 46px; flex: 0 0 46px; text-align: center; }
-.switch-row { display: flex; align-items: center; gap: 9px; color: #b8c1d5; font-size: 12px; cursor: pointer; }
+.switch-row { display: flex; align-items: center; gap: 9px; color: var(--ui-text-body); font-size: 12px; cursor: pointer; }
 .switch-row input { position: absolute; opacity: 0; pointer-events: none; }
-.switch-ui { position: relative; width: 32px; height: 18px; border-radius: 10px; background: #354258; transition: background .16s ease; }
+.switch-ui { position: relative; width: 32px; height: 18px; border-radius: 10px; background: var(--ui-switch-off); transition: background .16s ease; }
 .switch-ui::after { content: ''; position: absolute; left: 2px; top: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: transform .16s ease; }
-.switch-row input:checked + .switch-ui { background: #625ff1; }
+.switch-row input:checked + .switch-ui { background: var(--ui-accent); }
 .switch-row input:checked + .switch-ui::after { transform: translateX(14px); }
 .switch-row input:disabled + .switch-ui { opacity: 0.45; cursor: not-allowed; }
 </style>

src/views/particle-panel/ParticleAppearanceSection.vue

@@ -163,72 +163,72 @@ const { resolvedCurveEditorMode, sys, textureFileInput, sequenceFileInput, addIm
 </script>
 
 <style scoped>
-.group { border: 1px solid #2a2a3c; border-radius: 8px; margin-bottom: 10px; overflow: hidden; }
+.group { border: 1px solid var(--ui-border); border-radius: 8px; margin-bottom: 10px; overflow: hidden; }
 .group-head {
   display: flex; align-items: center; gap: 6px; padding: 7px 10px; cursor: pointer;
-  font-size: 12px; font-weight: 600; color: #ccd; background: #191924; user-select: none;
+  font-size: 12px; font-weight: 600; color: var(--ui-text-soft); background: var(--ui-surface-muted); user-select: none;
 }
-.group-head:hover { background: #20202e; }
+.group-head:hover { background: var(--ui-hover-surface); }
 .group-reset {
-  margin-left: auto; height: 22px; padding: 0 7px; border: 1px solid #3a465f; border-radius: 5px;
+  margin-left: auto; height: 22px; padding: 0 7px; border: 1px solid var(--ui-border-strong); border-radius: 5px;
-  background: #252d3d; color: #9eabc3; font-size: 10px; line-height: 20px; cursor: pointer;
+  background: var(--ui-surface-raised); color: var(--ui-text-body); font-size: 10px; line-height: 20px; cursor: pointer;
 }
-.group-reset:hover { border-color: #7774ff; background: #45426f; color: #fff; }
+.group-reset:hover { border-color: var(--ui-accent-strong); background: var(--ui-accent-soft); color: #fff; }
 .group-body { padding: 8px 10px 12px; }
-.caret { display: inline-block; width: 12px; color: #667; font-size: 11px; }
+.caret { display: inline-block; width: 12px; color: var(--ui-text-muted); font-size: 11px; }
-.divider { height: 1px; background: #2a2a3c; margin: 8px 0; }
+.divider { height: 1px; background: var(--ui-border); margin: 8px 0; }
-.row { display: flex; align-items: center; gap: 8px; margin: 6px 0; font-size: 12px; color: #aab; }
+.row { display: flex; align-items: center; gap: 8px; margin: 6px 0; font-size: 12px; color: var(--ui-text); }
-.row > span:first-child { width: 60px; flex-shrink: 0; color: #8a93bb; }
+.row > span:first-child { width: 60px; flex-shrink: 0; color: var(--ui-text-secondary); }
-.inp { flex: 1; min-width: 0; padding: 3px 5px; background: #1a1a28; border: 1px solid #2e2e44; border-radius: 5px; color: #dde; font-size: 12px; }
+.inp { flex: 1; min-width: 0; padding: 3px 5px; background: var(--ui-control-bg); border: 1px solid var(--ui-border-control); border-radius: 5px; color: var(--ui-text-strong); font-size: 12px; }
 .colr { width: 28px; height: 22px; border: none; background: none; cursor: pointer; }
-.seg { flex: 1; padding: 5px; background: #1e1e2e; border: 1px solid #2e2e44; border-radius: 6px; color: #aab; font-size: 12px; cursor: pointer; }
+.seg { flex: 1; padding: 5px; background: var(--ui-control-bg-alt); border: 1px solid var(--ui-border-control); border-radius: 6px; color: var(--ui-text); font-size: 12px; cursor: pointer; }
-.seg.on { background: #3a5a8c; color: #fff; border-color: #5a7ab8; }
+.seg.on { background: var(--ui-selected-bg); color: #fff; border-color: var(--ui-selected-border); }
-.look-title { font-size: 12px; font-weight: 600; color: #ccd; margin: 10px 0 6px; padding-bottom: 4px; border-bottom: 1px solid #2a2a3c; }
+.look-title { font-size: 12px; font-weight: 600; color: var(--ui-text-soft); margin: 10px 0 6px; padding-bottom: 4px; border-bottom: 1px solid var(--ui-border); }
 .look-title:first-child { margin-top: 2px; }
 .seg { display: flex; gap: 6px; margin: 6px 0; }
-.seg-btn { flex: 1; padding: 5px; background: #1e1e2e; border: 1px solid #2e2e44; border-radius: 6px; color: #aab; font-size: 12px; cursor: pointer; }
+.seg-btn { flex: 1; padding: 5px; background: var(--ui-control-bg-alt); border: 1px solid var(--ui-border-control); border-radius: 6px; color: var(--ui-text); font-size: 12px; cursor: pointer; }
-.seg-btn.active { background: #3a5a8c; color: #fff; border-color: #5a7ab8; }
+.seg-btn.active { background: var(--ui-selected-bg); color: #fff; border-color: var(--ui-selected-border); }
 .curve-wrap { margin: 6px 0; }
-.curve-labels { display: flex; justify-content: space-between; color: #566; font-size: 10px; margin-top: 2px; }
+.curve-labels { display: flex; justify-content: space-between; color: var(--ui-text-muted); font-size: 10px; margin-top: 2px; }
 .image-title { display: flex; align-items: center; justify-content: space-between; }
-.image-add { width: 26px; height: 24px; border: 1px solid #4a4d9a; border-radius: 5px; background: #252850; color: #8f8cff; font-size: 18px; line-height: 1; cursor: pointer; }
+.image-add { width: 26px; height: 24px; border: 1px solid var(--ui-accent-strong); border-radius: 5px; background: var(--ui-accent-soft-bg); color: var(--ui-accent-text-soft); font-size: 18px; line-height: 1; cursor: pointer; }
-.image-add:hover { background: #4542a8; color: #fff; }
+.image-add:hover { background: var(--ui-accent-button); color: #fff; }
-.resource-divider { height: 1px; margin: 9px 0 7px; background: #2a3549; }
+.resource-divider { height: 1px; margin: 9px 0 7px; background: var(--ui-border-subtle); }
 .resource-color-row .blend-select { max-width: 88px; }
 .resource-color-picker .hex { margin-left: 0; }
-.random-color-hint { margin: -5px 0 9px 68px; color: #66758e; font-size: 9px; line-height: 1.45; }
+.random-color-hint { margin: -5px 0 9px 68px; color: var(--ui-text-faint); font-size: 9px; line-height: 1.45; }
-.hex-input { width: 72px; padding: 4px 6px; border: 1px solid #344158; border-radius: 5px; outline: none; background: #101725; color: #aeb8cb; font-size: 11px; font-family: monospace; }
+.hex-input { width: 72px; padding: 4px 6px; border: 1px solid var(--ui-border-strong); border-radius: 5px; outline: none; background: var(--ui-control-deep); color: var(--ui-text-body); font-size: 11px; font-family: monospace; }
-.hex-input:focus { border-color: #7774ff; color: #fff; }
+.hex-input:focus { border-color: var(--ui-accent-strong); color: #fff; }
-.resource-alpha-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; color: #8a93bb; font-size: 12px; }
+.resource-alpha-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; color: var(--ui-text-secondary); font-size: 12px; }
 .alpha-modes { display: flex; gap: 3px; }
-.alpha-modes button { padding: 4px 8px; border: 1px solid transparent; border-radius: 5px; background: transparent; color: #8d98ae; font-size: 11px; cursor: pointer; }
+.alpha-modes button { padding: 4px 8px; border: 1px solid transparent; border-radius: 5px; background: transparent; color: var(--ui-text-faint); font-size: 11px; cursor: pointer; }
-.alpha-modes button:hover { background: #273246; }
+.alpha-modes button:hover { background: var(--ui-control-hover); }
-.alpha-modes button.on { border-color: #7774ff; background: #605df0; color: #fff; }
+.alpha-modes button.on { border-color: var(--ui-accent-strong); background: var(--ui-accent); color: #fff; }
 .resource-alpha-curve { margin-top: 7px; }
 .file-input { display: none; }
-.hex { font-size: 11px; color: #889; margin-left: auto; font-variant-numeric: tabular-nums; }
+.hex { font-size: 11px; color: var(--ui-text-muted); margin-left: auto; font-variant-numeric: tabular-nums; }
 .inp.tiny { width: 46px; flex: 0 0 46px; text-align: center; }
 .render-layer-current { display: flex; align-items: center; gap: 6px; margin: 6px 0; }
-.render-layer-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #9aa6c2; font-size: 11px; }
+.render-layer-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ui-text-body); font-size: 11px; }
-.mini-btn { flex: 0 0 auto; height: 24px; padding: 0 7px; border: 1px solid #3d4a66; border-radius: 5px; background: #202a3e; color: #a9b5cf; font-size: 10px; cursor: pointer; }
+.mini-btn { flex: 0 0 auto; height: 24px; padding: 0 7px; border: 1px solid var(--ui-border-strong); border-radius: 5px; background: var(--ui-surface-raised); color: var(--ui-text-body); font-size: 10px; cursor: pointer; }
-.mini-btn:hover { border-color: #7774ff; color: #fff; }
+.mini-btn:hover { border-color: var(--ui-accent-strong); color: #fff; }
 .mini-btn.ghost { background: transparent; }
-.slot-picker { margin: 6px 0; padding: 6px; border: 1px solid #2e3a52; border-radius: 6px; background: #111a28; }
+.slot-picker { margin: 6px 0; padding: 6px; border: 1px solid var(--ui-border-strong); border-radius: 6px; background: var(--ui-surface); }
 .slot-list { max-height: 180px; overflow: auto; margin-top: 6px; }
-.slot-item { display: flex; align-items: center; gap: 6px; width: 100%; padding: 4px 6px; border: 1px solid transparent; border-radius: 4px; background: transparent; color: #aab4cc; font-size: 11px; text-align: left; cursor: pointer; }
+.slot-item { display: flex; align-items: center; gap: 6px; width: 100%; padding: 4px 6px; border: 1px solid transparent; border-radius: 4px; background: transparent; color: var(--ui-text-body); font-size: 11px; text-align: left; cursor: pointer; }
-.slot-item:hover { background: #1d2a3f; }
+.slot-item:hover { background: var(--ui-surface); }
-.slot-item.on { border-color: #7774ff; background: #2b2b55; color: #fff; }
+.slot-item.on { border-color: var(--ui-accent-strong); background: var(--ui-accent-soft-bg); color: #fff; }
-.slot-order { width: 26px; flex: 0 0 26px; color: #66758e; font-variant-numeric: tabular-nums; }
+.slot-order { width: 26px; flex: 0 0 26px; color: var(--ui-text-faint); font-variant-numeric: tabular-nums; }
 .slot-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.slot-attachment { max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #6d7c96; font-size: 10px; }
+.slot-attachment { max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ui-text-faint); font-size: 10px; }
-.switch-row { display: flex; align-items: center; gap: 9px; color: #b8c1d5; font-size: 12px; cursor: pointer; }
+.switch-row { display: flex; align-items: center; gap: 9px; color: var(--ui-text-body); font-size: 12px; cursor: pointer; }
 .switch-row input { position: absolute; opacity: 0; pointer-events: none; }
-.switch-ui { position: relative; width: 32px; height: 18px; border-radius: 10px; background: #354258; transition: background .16s ease; }
+.switch-ui { position: relative; width: 32px; height: 18px; border-radius: 10px; background: var(--ui-switch-off); transition: background .16s ease; }
 .switch-ui::after { content: ''; position: absolute; left: 2px; top: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: transform .16s ease; }
-.switch-row input:checked + .switch-ui { background: #625ff1; }
+.switch-row input:checked + .switch-ui { background: var(--ui-accent); }
 .switch-row input:checked + .switch-ui::after { transform: translateX(14px); }
 .switch-row input:disabled + .switch-ui { opacity: .45; cursor: not-allowed; }
 .render-layer-switch { margin: 6px 0; }
-.modifier-hint { margin: 7px 0 0 2px; color: #647086; font-size: 9px; line-height: 1.5; }
+.modifier-hint { margin: 7px 0 0 2px; color: var(--ui-text-faint); font-size: 9px; line-height: 1.5; }
-.render-layer-warning { color: #d8a45e; }
+.render-layer-warning { color: var(--ui-text-body); }
 </style>

src/views/particle-panel/ParticleAttributesSection.vue

@@ -162,34 +162,34 @@ const { sys, collapsed, toggle, sectionOpen, resetModule, setSpeedOverLifeMode,
 </script>
 
 <style scoped>
-.group { border: 1px solid #2a2a3c; border-radius: 8px; margin-bottom: 10px; overflow: hidden; }
+.group { border: 1px solid var(--ui-border); border-radius: 8px; margin-bottom: 10px; overflow: hidden; }
 .group-head {
   display: flex; align-items: center; gap: 6px; padding: 7px 10px; cursor: pointer;
-  font-size: 12px; font-weight: 600; color: #ccd; background: #191924; user-select: none;
+  font-size: 12px; font-weight: 600; color: var(--ui-text-soft); background: var(--ui-surface-muted); user-select: none;
 }
-.group-head:hover { background: #20202e; }
+.group-head:hover { background: var(--ui-hover-surface); }
 .group-reset {
-  margin-left: auto; height: 22px; padding: 0 7px; border: 1px solid #3a465f; border-radius: 5px;
+  margin-left: auto; height: 22px; padding: 0 7px; border: 1px solid var(--ui-border-strong); border-radius: 5px;
-  background: #252d3d; color: #9eabc3; font-size: 10px; line-height: 20px; cursor: pointer;
+  background: var(--ui-surface-raised); color: var(--ui-text-body); font-size: 10px; line-height: 20px; cursor: pointer;
 }
-.group-reset:hover { border-color: #7774ff; background: #45426f; color: #fff; }
+.group-reset:hover { border-color: var(--ui-accent-strong); background: var(--ui-accent-soft); color: #fff; }
 .group-body { padding: 8px 10px 12px; }
-.caret { display: inline-block; width: 12px; color: #667; font-size: 11px; }
+.caret { display: inline-block; width: 12px; color: var(--ui-text-muted); font-size: 11px; }
-.row { display: flex; align-items: center; gap: 8px; margin: 6px 0; font-size: 12px; color: #aab; }
+.row { display: flex; align-items: center; gap: 8px; margin: 6px 0; font-size: 12px; color: var(--ui-text); }
-.row > span:first-child { width: 60px; flex-shrink: 0; color: #8a93bb; }
+.row > span:first-child { width: 60px; flex-shrink: 0; color: var(--ui-text-secondary); }
-.attr-body { padding: 10px; background: #151b27; }
+.attr-body { padding: 10px; background: var(--ui-surface-soft); }
-.attr-section-title { margin: 2px 0 8px; color: #9ca8c0; font-size: 12px; font-weight: 700; }
+.attr-section-title { margin: 2px 0 8px; color: var(--ui-text-secondary); font-size: 12px; font-weight: 700; }
-.attr-section-title.life-title { margin-top: 14px; padding-top: 12px; border-top: 1px solid #2d3950; }
+.attr-section-title.life-title { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--ui-border-strong); }
-.attr-axis-head { display: flex; align-items: center; justify-content: space-between; margin: 10px 1px -2px; color: #aeb8cf; font-size: 12px; font-weight: 600; }
+.attr-axis-head { display: flex; align-items: center; justify-content: space-between; margin: 10px 1px -2px; color: var(--ui-text-body); font-size: 12px; font-weight: 600; }
 .axis-modes { display: flex; gap: 4px; }
-.axis-mode { padding: 4px 8px; border: 1px solid #344158; border-radius: 5px; background: #273246; color: #aeb8cf; font-size: 11px; cursor: pointer; }
+.axis-mode { padding: 4px 8px; border: 1px solid var(--ui-border-strong); border-radius: 5px; background: var(--ui-control-hover); color: var(--ui-text-body); font-size: 11px; cursor: pointer; }
-.axis-mode.on { border-color: #7774ff; background: #605df0; color: #fff; }
+.axis-mode.on { border-color: var(--ui-accent-strong); background: var(--ui-accent); color: #fff; }
-.life-item { padding: 9px 0; border-bottom: 1px solid #2a3549; }
+.life-item { padding: 9px 0; border-bottom: 1px solid var(--ui-border-subtle); }
-.switch-row { display: flex; align-items: center; gap: 9px; color: #b8c1d5; font-size: 12px; cursor: pointer; }
+.switch-row { display: flex; align-items: center; gap: 9px; color: var(--ui-text-body); font-size: 12px; cursor: pointer; }
 .switch-row input { position: absolute; opacity: 0; pointer-events: none; }
-.switch-ui { position: relative; width: 32px; height: 18px; border-radius: 10px; background: #354258; transition: background .16s ease; }
+.switch-ui { position: relative; width: 32px; height: 18px; border-radius: 10px; background: var(--ui-switch-off); transition: background .16s ease; }
 .switch-ui::after { content: ''; position: absolute; left: 2px; top: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: transform .16s ease; }
-.switch-row input:checked + .switch-ui { background: #625ff1; }
+.switch-row input:checked + .switch-ui { background: var(--ui-accent); }
 .switch-row input:checked + .switch-ui::after { transform: translateX(14px); }
 .life-axis { margin: 9px 0 2px 42px; }
 .switch-row input:disabled + .switch-ui { opacity: 0.45; cursor: not-allowed; }

src/views/particle-panel/ParticleExportFooter.vue

@@ -35,27 +35,27 @@ const { exportSettings, exportBusy, exportTarget, exportMessage, exportError, co
 
 <style scoped>
 .spine-export-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 10px; }
-.export-spine-json { width: 100%; padding: 9px 8px; flex: 0 0 auto; border: 1px solid #4f4b9a; border-radius: 7px; background: #403b91; color: #f1f0ff; font-size: 12px; font-weight: 700; cursor: pointer; }
+.export-spine-json { width: 100%; padding: 9px 8px; flex: 0 0 auto; border: 1px solid var(--ui-accent-soft); border-radius: 7px; background: var(--ui-accent-button); color: var(--ui-accent-text-soft); font-size: 12px; font-weight: 700; cursor: pointer; }
-.export-spine-json:hover { border-color: #7774ff; background: #514bc0; }
+.export-spine-json:hover { border-color: var(--ui-accent-strong); background: var(--ui-accent-button); }
 .export-spine-json:disabled { cursor: wait; opacity: .68; }
 .export-spine-project { grid-column: 1 / -1; width: 100%; padding: 7px 8px; border: 1px solid #287d69; border-radius: 7px; background: #196854; color: #edfff9; font-size: 12px; font-weight: 700; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
 .export-spine-project small { color: inherit; font-size: 9px; font-weight: 500; line-height: 1.1; }
 .export-spine-project:hover:not(:disabled) { border-color: #47c89f; background: #238267; }
 .export-spine-project:disabled { cursor: not-allowed; opacity: .48; }
-.export-spine-images { width: 100%; padding: 8px; border: 1px solid #3b5f8b; border-radius: 7px; background: #243e64; color: #eaf3ff; font-size: 12px; font-weight: 700; cursor: pointer; }
+.export-spine-images { width: 100%; padding: 8px; border: 1px solid var(--ui-border-button); border-radius: 7px; background: var(--ui-surface-raised); color: #eaf3ff; font-size: 12px; font-weight: 700; cursor: pointer; }
-.export-spine-images:hover:not(:disabled) { border-color: #6099dc; background: #315581; }
+.export-spine-images:hover:not(:disabled) { border-color: var(--ui-accent-strong); background: var(--ui-accent-soft); }
 .export-spine-images:disabled { cursor: wait; opacity: .55; }
-.connector-status { display: flex; align-items: center; justify-content: center; gap: 5px; padding-top: 6px; color: #717b99; font-size: 10px; }
+.connector-status { display: flex; align-items: center; justify-content: center; gap: 5px; padding-top: 6px; color: var(--ui-text-faint); font-size: 10px; }
-.connector-status .connector-dot { width: 6px; height: 6px; border-radius: 50%; background: #66718f; }
+.connector-status .connector-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ui-text-faint); }
 .connector-status.ready { color: #70d8ae; }
 .connector-status.ready .connector-dot { background: #49c993; box-shadow: 0 0 5px #49c99388; }
 .connector-status.warning { color: #d4aa67; }
 .connector-status.warning .connector-dot { background: #d4aa67; }
-.connector-status button { padding: 0 3px; border: 0; background: transparent; color: #8290b6; font-size: 10px; cursor: pointer; }
+.connector-status button { padding: 0 3px; border: 0; background: transparent; color: var(--ui-text-secondary); font-size: 10px; cursor: pointer; }
-.connector-status button:hover { color: #c5caff; }
+.connector-status button:hover { color: var(--ui-accent-text-soft); }
-.connector-status a { padding: 0 3px; color: #a8b0ff; font-size: 10px; text-decoration: underline; }
+.connector-status a { padding: 0 3px; color: var(--ui-accent-text-soft); font-size: 10px; text-decoration: underline; }
-.connector-status a:hover { color: #d8dcff; }
+.connector-status a:hover { color: var(--ui-accent-text-soft); }
 .export-message { padding: 7px 5px 0; color: #70d8ae; font-size: 10px; line-height: 1.45; text-align: center; }
 .export-message.error { color: #ff858f; }
-.export-message a { display: inline-block; margin-left: 5px; color: #9da7ff; text-decoration: underline; }
+.export-message a { display: inline-block; margin-left: 5px; color: var(--ui-accent-text-muted); text-decoration: underline; }
 </style>

src/views/particle-panel/ParticleModifiersSection.vue

@@ -555,64 +555,64 @@ function setCollisionLimit(rule: { collisionLimit: number }, event: Event) {
 </script>
 
 <style scoped>
-.empty { color: #667; font-size: 12px; padding: 8px 0; }
+.empty { color: var(--ui-text-muted); font-size: 12px; padding: 8px 0; }
-.group { border: 1px solid #2a2a3c; border-radius: 8px; margin-bottom: 10px; overflow: hidden; }
+.group { border: 1px solid var(--ui-border); border-radius: 8px; margin-bottom: 10px; overflow: hidden; }
 .group-head {
   display: flex; align-items: center; gap: 6px; padding: 7px 10px; cursor: pointer;
-  font-size: 12px; font-weight: 600; color: #ccd; background: #191924; user-select: none;
+  font-size: 12px; font-weight: 600; color: var(--ui-text-soft); background: var(--ui-surface-muted); user-select: none;
 }
-.group-head:hover { background: #20202e; }
+.group-head:hover { background: var(--ui-hover-surface); }
 .group-reset {
-  margin-left: auto; height: 22px; padding: 0 7px; border: 1px solid #3a465f; border-radius: 5px;
+  margin-left: auto; height: 22px; padding: 0 7px; border: 1px solid var(--ui-border-strong); border-radius: 5px;
-  background: #252d3d; color: #9eabc3; font-size: 10px; line-height: 20px; cursor: pointer;
+  background: var(--ui-surface-raised); color: var(--ui-text-body); font-size: 10px; line-height: 20px; cursor: pointer;
 }
-.group-reset:hover { border-color: #7774ff; background: #45426f; color: #fff; }
+.group-reset:hover { border-color: var(--ui-accent-strong); background: var(--ui-accent-soft); color: #fff; }
 .group-body { padding: 8px 10px 12px; }
-.caret { display: inline-block; width: 12px; color: #667; font-size: 11px; }
+.caret { display: inline-block; width: 12px; color: var(--ui-text-muted); font-size: 11px; }
-.divider { height: 1px; background: #2a2a3c; margin: 8px 0; }
+.divider { height: 1px; background: var(--ui-border); margin: 8px 0; }
-.field-block { display: flex; flex-direction: column; gap: 5px; margin: 10px 0; color: #8f9ab3; font-size: 11px; }
+.field-block { display: flex; flex-direction: column; gap: 5px; margin: 10px 0; color: var(--ui-text-faint); font-size: 11px; }
 .field-block > .inp { width: 100%; box-sizing: border-box; min-height: 30px; }
-.field-block small { color: #5f6d86; line-height: 1.5; }
+.field-block small { color: var(--ui-text-faint); line-height: 1.5; }
 .field-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; align-items: end; }
-.compact-field { display: flex; min-width: 0; flex-direction: column; gap: 5px; margin: 5px 0; color: #8f9ab3; font-size: 11px; }
+.compact-field { display: flex; min-width: 0; flex-direction: column; gap: 5px; margin: 5px 0; color: var(--ui-text-faint); font-size: 11px; }
 .compact-field .inp { width: 100%; min-height: 30px; box-sizing: border-box; }
-.tag { font-size: 10px; color: #667; background: #1c1c2a; border-radius: 4px; padding: 1px 5px; }
+.tag { font-size: 10px; color: var(--ui-text-muted); background: var(--ui-border); border-radius: 4px; padding: 1px 5px; }
-.row { display: flex; align-items: center; gap: 8px; margin: 6px 0; font-size: 12px; color: #aab; }
+.row { display: flex; align-items: center; gap: 8px; margin: 6px 0; font-size: 12px; color: var(--ui-text); }
-.row > span:first-child { width: 60px; flex-shrink: 0; color: #8a93bb; }
+.row > span:first-child { width: 60px; flex-shrink: 0; color: var(--ui-text-secondary); }
-.inp { flex: 1; min-width: 0; padding: 3px 5px; background: #1a1a28; border: 1px solid #2e2e44; border-radius: 5px; color: #dde; font-size: 12px; }
+.inp { flex: 1; min-width: 0; padding: 3px 5px; background: var(--ui-control-bg); border: 1px solid var(--ui-border-control); border-radius: 5px; color: var(--ui-text-strong); font-size: 12px; }
 .colr { width: 28px; height: 22px; border: none; background: none; cursor: pointer; }
-.placeholder { color: #667; font-size: 11px; padding: 6px 0; }
+.placeholder { color: var(--ui-text-muted); font-size: 11px; padding: 6px 0; }
-.image-add { width: 26px; height: 24px; border: 1px solid #4a4d9a; border-radius: 5px; background: #252850; color: #8f8cff; font-size: 18px; line-height: 1; cursor: pointer; }
+.image-add { width: 26px; height: 24px; border: 1px solid var(--ui-accent-strong); border-radius: 5px; background: var(--ui-accent-soft-bg); color: var(--ui-accent-text-soft); font-size: 18px; line-height: 1; cursor: pointer; }
-.image-add:hover { background: #4542a8; color: #fff; }
+.image-add:hover { background: var(--ui-accent-button); color: #fff; }
-.resource-divider { height: 1px; margin: 9px 0 7px; background: #2a3549; }
+.resource-divider { height: 1px; margin: 9px 0 7px; background: var(--ui-border-subtle); }
-.hex-input { width: 72px; padding: 4px 6px; border: 1px solid #344158; border-radius: 5px; outline: none; background: #101725; color: #aeb8cb; font-size: 11px; font-family: monospace; }
+.hex-input { width: 72px; padding: 4px 6px; border: 1px solid var(--ui-border-strong); border-radius: 5px; outline: none; background: var(--ui-control-deep); color: var(--ui-text-body); font-size: 11px; font-family: monospace; }
-.hex-input:focus { border-color: #7774ff; color: #fff; }
+.hex-input:focus { border-color: var(--ui-accent-strong); color: #fff; }
 .alpha-modes { display: flex; gap: 3px; }
-.alpha-modes button { padding: 4px 8px; border: 1px solid transparent; border-radius: 5px; background: transparent; color: #8d98ae; font-size: 11px; cursor: pointer; }
+.alpha-modes button { padding: 4px 8px; border: 1px solid transparent; border-radius: 5px; background: transparent; color: var(--ui-text-faint); font-size: 11px; cursor: pointer; }
-.alpha-modes button:hover { background: #273246; }
+.alpha-modes button:hover { background: var(--ui-control-hover); }
-.alpha-modes button.on { border-color: #7774ff; background: #605df0; color: #fff; }
+.alpha-modes button.on { border-color: var(--ui-accent-strong); background: var(--ui-accent); color: #fff; }
 .file-input { display: none; }
-.hex { font-size: 11px; color: #889; margin-left: auto; font-variant-numeric: tabular-nums; }
+.hex { font-size: 11px; color: var(--ui-text-muted); margin-left: auto; font-variant-numeric: tabular-nums; }
 .inp.tiny { width: 46px; flex: 0 0 46px; text-align: center; }
-.axis-mode { padding: 4px 8px; border: 1px solid #344158; border-radius: 5px; background: #273246; color: #aeb8cf; font-size: 11px; cursor: pointer; }
+.axis-mode { padding: 4px 8px; border: 1px solid var(--ui-border-strong); border-radius: 5px; background: var(--ui-control-hover); color: var(--ui-text-body); font-size: 11px; cursor: pointer; }
-.axis-mode.on { border-color: #7774ff; background: #605df0; color: #fff; }
+.axis-mode.on { border-color: var(--ui-accent-strong); background: var(--ui-accent); color: #fff; }
-.switch-row { display: flex; align-items: center; gap: 9px; color: #b8c1d5; font-size: 12px; cursor: pointer; }
+.switch-row { display: flex; align-items: center; gap: 9px; color: var(--ui-text-body); font-size: 12px; cursor: pointer; }
 .switch-row input { position: absolute; opacity: 0; pointer-events: none; }
-.switch-ui { position: relative; width: 32px; height: 18px; border-radius: 10px; background: #354258; transition: background .16s ease; }
+.switch-ui { position: relative; width: 32px; height: 18px; border-radius: 10px; background: var(--ui-switch-off); transition: background .16s ease; }
 .switch-ui::after { content: ''; position: absolute; left: 2px; top: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: transform .16s ease; }
-.switch-row input:checked + .switch-ui { background: #625ff1; }
+.switch-row input:checked + .switch-ui { background: var(--ui-accent); }
 .switch-row input:checked + .switch-ui::after { transform: translateX(14px); }
-.modifier-item { padding: 8px 0 10px; border-bottom: 1px solid #2a3549; }
+.modifier-item { padding: 8px 0 10px; border-bottom: 1px solid var(--ui-border-subtle); }
 .events-item { margin-top: 4px; padding-bottom: 2px; border-bottom: 0; }
 .event-rules { display: flex; flex-direction: column; gap: 7px; margin-top: 8px; }
-.event-card { padding: 7px; border: 1px solid #2b3a54; border-radius: 7px; background: #121a28; }
+.event-card { padding: 7px; border: 1px solid var(--ui-border-strong); border-radius: 7px; background: var(--ui-surface); }
 .event-selects { display: flex; align-items: center; gap: 5px; }
 .event-selects .inp { height: 26px; min-height: 26px; box-sizing: border-box; font-size: 11px; }
 .event-select { flex: 0 0 34%; }
 .event-target { flex: 1; min-width: 0; }
-.event-remove { width: 24px; height: 26px; flex: 0 0 24px; padding: 0; border: 1px solid #3a465f; border-radius: 5px; background: #1c2638; color: #8794ad; font-size: 11px; cursor: pointer; }
+.event-remove { width: 24px; height: 26px; flex: 0 0 24px; padding: 0; border: 1px solid var(--ui-border-strong); border-radius: 5px; background: var(--ui-surface-soft); color: var(--ui-text-faint); font-size: 11px; cursor: pointer; }
 .event-remove:hover { border-color: #a05260; background: #3a2230; color: #ffb3c0; }
-.event-probability { display: flex; align-items: center; gap: 8px; margin-top: 6px; color: #8d9ab5; font-size: 10px; }
+.event-probability { display: flex; align-items: center; gap: 8px; margin-top: 6px; color: var(--ui-text-faint); font-size: 10px; }
 .event-probability > span { flex: 0 0 56px; }
 .event-probability .inp { flex: 1; height: 26px; box-sizing: border-box; font-size: 11px; }
 .event-inherit { margin-top: 4px; }
@@ -620,58 +620,58 @@ function setCollisionLimit(rule: { collisionLimit: number }, event: Event) {
 .event-color-mode > span { flex: 0 0 84px; }
 .event-color-mode .inp { height: 26px; min-height: 26px; box-sizing: border-box; font-size: 11px; }
 .event-collision-limit > span { flex-basis: 72px; }
-.inherit-trigger { flex: 1; min-width: 0; height: 26px; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 0 7px; border: 1px solid #34435e; border-radius: 4px; background: #101827; color: #cdd6e8; font-size: 11px; text-align: left; cursor: pointer; }
+.inherit-trigger { flex: 1; min-width: 0; height: 26px; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 0 7px; border: 1px solid var(--ui-border-strong); border-radius: 4px; background: var(--ui-control-deep); color: var(--ui-text-body); font-size: 11px; text-align: left; cursor: pointer; }
-.inherit-trigger:hover { border-color: #5d5aa8; }
+.inherit-trigger:hover { border-color: var(--ui-accent); }
 .inherit-summary { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.inherit-trigger i { color: #7f8db0; font-style: normal; font-size: 10px; }
+.inherit-trigger i { color: var(--ui-text-faint); font-style: normal; font-size: 10px; }
-.inherit-menu { position: fixed; z-index: 9999; padding: 5px; border: 1px solid #3b3f4a; border-radius: 6px; background: #232427; box-shadow: 0 12px 30px rgba(0, 0, 0, .55); }
+.inherit-menu { position: fixed; z-index: 9999; padding: 5px; border: 1px solid var(--ui-border); border-radius: 6px; background: var(--ui-popover-bg); box-shadow: 0 12px 30px rgba(0, 0, 0, .55); }
-.inherit-option { display: flex; align-items: center; gap: 6px; width: 100%; height: 26px; padding: 0 7px; border: 0; border-radius: 4px; background: transparent; color: #c9ccd3; font-size: 12px; text-align: left; cursor: pointer; }
+.inherit-option { display: flex; align-items: center; gap: 6px; width: 100%; height: 26px; padding: 0 7px; border: 0; border-radius: 4px; background: transparent; color: var(--ui-text-body); font-size: 12px; text-align: left; cursor: pointer; }
-.inherit-option:hover { background: #3a5a8c; color: #fff; }
+.inherit-option:hover { background: var(--ui-selected-bg); color: #fff; }
-.inherit-check { width: 14px; flex: 0 0 14px; color: #d8dbe2; font-size: 12px; }
+.inherit-check { width: 14px; flex: 0 0 14px; color: var(--ui-text-strong); font-size: 12px; }
-.inherit-divider { height: 1px; margin: 4px; background: #35373d; }
+.inherit-divider { height: 1px; margin: 4px; background: var(--ui-border); }
-.event-add { height: 28px; border: 1px dashed #536079; border-radius: 6px; background: transparent; color: #9aa7c2; font-size: 11px; cursor: pointer; }
+.event-add { height: 28px; border: 1px dashed var(--ui-border-button); border-radius: 6px; background: transparent; color: var(--ui-text-faint); font-size: 11px; cursor: pointer; }
-.event-add:hover { border-color: #7774ff; background: #232a45; color: #fff; }
+.event-add:hover { border-color: var(--ui-accent-strong); background: var(--ui-control-hover); color: #fff; }
 .modifier-switch { font-weight: 600; }
-.modifier-params { margin: 8px 0 0 10px; padding: 2px 0 2px 10px; border-left: 2px solid #344158; }
+.modifier-params { margin: 8px 0 0 10px; padding: 2px 0 2px 10px; border-left: 2px solid var(--ui-border-strong); }
-.modifier-hint { margin: 7px 0 0 2px; color: #647086; font-size: 9px; line-height: 1.5; }
+.modifier-hint { margin: 7px 0 0 2px; color: var(--ui-text-faint); font-size: 9px; line-height: 1.5; }
 .collision-filter-params { position: relative; padding-top: 5px; padding-bottom: 5px; }
-.collision-filter-title { margin-bottom: 8px; color: #9ba7bd; font-size: 11px; font-weight: 600; }
+.collision-filter-title { margin-bottom: 8px; color: var(--ui-text-faint); font-size: 11px; font-weight: 600; }
 .collision-filter-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
-.collision-filter-tag { display: inline-flex; min-width: 0; align-items: center; gap: 6px; padding: 5px 5px 5px 8px; border: 1px solid #625ff1; border-radius: 6px; background: #514dcf; color: #fff; font-size: 11px; }
+.collision-filter-tag { display: inline-flex; min-width: 0; align-items: center; gap: 6px; padding: 5px 5px 5px 8px; border: 1px solid var(--ui-accent); border-radius: 6px; background: var(--ui-accent-button); color: #fff; font-size: 11px; }
 .collision-filter-tag > span { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.collision-filter-tag.disabled { border-color: #4b5364; background: #343b4b; color: #929bad; }
+.collision-filter-tag.disabled { border-color: var(--ui-border-control); background: var(--ui-border-control); color: var(--ui-text-secondary); }
 .collision-filter-tag button { width: 18px; height: 18px; padding: 0; border: 0; border-radius: 4px; background: rgba(11, 15, 26, 0.22); color: inherit; line-height: 16px; cursor: pointer; }
 .collision-filter-tag button:hover { background: rgba(11, 15, 26, 0.5); color: #fff; }
-.collision-filter-add { width: 30px; height: 30px; padding: 0; border: 1px dashed #536079; border-radius: 6px; background: #182131; color: #98a5bd; font-size: 18px; line-height: 28px; cursor: pointer; }
+.collision-filter-add { width: 30px; height: 30px; padding: 0; border: 1px dashed var(--ui-border-button); border-radius: 6px; background: var(--ui-surface); color: var(--ui-text-faint); font-size: 18px; line-height: 28px; cursor: pointer; }
-.collision-filter-add:hover, .collision-filter-add.active { border-color: #7774ff; background: #262c52; color: #fff; }
+.collision-filter-add:hover, .collision-filter-add.active { border-color: var(--ui-accent-strong); background: var(--ui-accent-soft); color: #fff; }
 .collision-filter-add:disabled { opacity: 0.42; cursor: not-allowed; }
-.collision-filter-empty { margin-top: 7px; color: #6f7b91; font-size: 10px; }
+.collision-filter-empty { margin-top: 7px; color: var(--ui-text-faint); font-size: 10px; }
-.collision-filter-picker { display: grid; gap: 4px; margin-top: 7px; padding: 5px; border: 1px solid #344158; border-radius: 6px; background: #101725; }
+.collision-filter-picker { display: grid; gap: 4px; margin-top: 7px; padding: 5px; border: 1px solid var(--ui-border-strong); border-radius: 6px; background: var(--ui-control-deep); }
-.collision-filter-picker button { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px; border: 0; border-radius: 4px; background: transparent; color: #c7d0e3; font-size: 11px; text-align: left; cursor: pointer; }
+.collision-filter-picker button { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px; border: 0; border-radius: 4px; background: transparent; color: var(--ui-text-body); font-size: 11px; text-align: left; cursor: pointer; }
-.collision-filter-picker button:hover { background: #29344a; color: #fff; }
+.collision-filter-picker button:hover { background: var(--ui-control-hover); color: #fff; }
 .collision-filter-picker button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.collision-filter-picker button small { flex: none; color: #68758d; font-size: 9px; }
+.collision-filter-picker button small { flex: none; color: var(--ui-text-faint); font-size: 9px; }
 .switch-row input:disabled + .switch-ui { opacity: 0.45; cursor: not-allowed; }
-.bone-follow-target { margin: 7px 0 9px; padding: 7px 8px; overflow: hidden; color: #7f8ba3; background: #121a29; border: 1px solid #2f3c53; border-radius: 5px; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
+.bone-follow-target { margin: 7px 0 9px; padding: 7px 8px; overflow: hidden; color: var(--ui-text-faint); background: var(--ui-surface); border: 1px solid var(--ui-border-strong); border-radius: 5px; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
-.bone-follow-target strong { color: #c8d0e4; font-weight: 600; }
+.bone-follow-target strong { color: var(--ui-text-body); font-weight: 600; }
 .bone-follow-missing { margin: 7px 0 9px; padding: 7px 8px; color: #d49aa3; background: #2a1e26; border: 1px solid #513540; border-radius: 5px; font-size: 10px; line-height: 1.5; }
-.bone-follow-rebind { width: 100%; min-height: 28px; margin: 0 0 8px; padding: 4px 8px; overflow: hidden; border: 1px solid #4a436e; border-radius: 5px; background: #2d2947; color: #c8c2ee; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
+.bone-follow-rebind { width: 100%; min-height: 28px; margin: 0 0 8px; padding: 4px 8px; overflow: hidden; border: 1px solid var(--ui-accent-soft); border-radius: 5px; background: var(--ui-accent-soft); color: var(--ui-accent-text-soft); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
-.bone-follow-rebind:hover { border-color: #7165bd; background: #3a335d; color: #fff; }
+.bone-follow-rebind:hover { border-color: var(--ui-accent-strong); background: var(--ui-accent-soft); color: #fff; }
 .bone-follow-transform-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
 .modifier-mode-row { display: flex; justify-content: flex-end; gap: 4px; margin-bottom: 6px; }
-.gravity-curve-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 10px 0 6px; color: #9ba7bd; font-size: 11px; }
+.gravity-curve-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 10px 0 6px; color: var(--ui-text-faint); font-size: 11px; }
-.gravity-curve-title span:last-child { color: #657188; font-size: 9px; }
+.gravity-curve-title span:last-child { color: var(--ui-text-faint); font-size: 9px; }
-.gravity-curve-axis { display: flex; justify-content: space-between; margin: 3px 34px 0 1px; color: #5f6b82; font-size: 9px; }
+.gravity-curve-axis { display: flex; justify-content: space-between; margin: 3px 34px 0 1px; color: var(--ui-text-faint); font-size: 9px; }
-.gravity-params :deep(.ce-svg) { height: 96px; background: #0f1625; border-color: #30405a; }
+.gravity-params :deep(.ce-svg) { height: 96px; background: var(--ui-control-deep); border-color: var(--ui-border-strong); }
 .trail-params { padding-right: 2px; }
-.trail-section-title { margin: 3px 0 8px; color: #aeb8cf; font-size: 12px; font-weight: 700; }
+.trail-section-title { margin: 3px 0 8px; color: var(--ui-text-body); font-size: 12px; font-weight: 700; }
 .trail-fixed-color .hex-input { min-width: 0; flex: 1; }
-.trail-mode-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 10px 0 6px; color: #9ba7bd; font-size: 11px; }
+.trail-mode-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 10px 0 6px; color: var(--ui-text-faint); font-size: 11px; }
-.trail-sub-switch { margin: 11px 0 7px; padding-top: 9px; border-top: 1px solid #2a3549; }
+.trail-sub-switch { margin: 11px 0 7px; padding-top: 9px; border-top: 1px solid var(--ui-border-subtle); }
 .trail-grid-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
 .trail-grid-row :deep(.ns) { min-width: 0; flex-wrap: wrap; align-items: center; }
 .trail-grid-row :deep(.ns-label) { width: 100%; }
 .trail-grid-row :deep(.ns-range) { min-width: 0; }
 .trail-grid-row :deep(.ns-num) { width: 42px; }
-.trail-params :deep(.ce-svg) { height: 92px; background: #0f1625; border-color: #30405a; }
+.trail-params :deep(.ce-svg) { height: 92px; background: var(--ui-control-deep); border-color: var(--ui-border-strong); }
 </style>

src/views/particle-panel/ProjectConfigSection.vue

@@ -200,108 +200,108 @@ function presetDisplayName(preset: PresetOption) {
 <style scoped>
 .project-context-menu {
   position: fixed; z-index: 10000; min-width: 180px; padding: 4px;
-  border: 1px solid #3d4962; border-radius: 7px; background: #171d2a;
+  border: 1px solid var(--ui-border-strong); border-radius: 7px; background: var(--ui-surface);
   box-shadow: 0 10px 28px rgba(0, 0, 0, .48);
 }
 .project-context-menu button {
   display: block; width: 100%; height: 30px; padding: 0 10px; border: 0; border-radius: 5px;
-  background: transparent; color: #d5dced; font: inherit; font-size: 12px; text-align: left; white-space: nowrap; cursor: pointer;
+  background: transparent; color: var(--ui-text-strong); font: inherit; font-size: 12px; text-align: left; white-space: nowrap; cursor: pointer;
 }
 .project-context-menu button:hover, .project-context-menu button:focus-visible {
-  outline: none; background: #2d3953; color: #fff;
+  outline: none; background: var(--ui-control-hover); color: #fff;
 }
 .config-management-body { padding-bottom: 2px; }
 .group-download {
-  max-width: 50%; min-height: 24px; margin-left: auto; padding: 3px 8px; border: 1px solid #485673; border-radius: 5px;
+  max-width: 50%; min-height: 24px; margin-left: auto; padding: 3px 8px; border: 1px solid var(--ui-border-button); border-radius: 5px;
-  background: #202a3b; color: #d7e0f0; font-size: 10px; font-weight: 700; line-height: 1.2;
+  background: var(--ui-button-surface); color: var(--ui-text-body); font-size: 10px; font-weight: 700; line-height: 1.2;
   white-space: normal; cursor: pointer;
 }
-.group-download:hover { border-color: #7774ff; background: #303858; color: #fff; }
+.group-download:hover { border-color: var(--ui-accent-strong); background: var(--ui-control-active); color: #fff; }
 .config-toolbar { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 6px; margin-bottom: 10px; }
 .config-toolbar button,.config-toolbar select {
-  min-width: 0; min-height: 30px; box-sizing: border-box; border: 1px solid #3b4864; border-radius: 6px;
+  min-width: 0; min-height: 30px; box-sizing: border-box; border: 1px solid var(--ui-border-strong); border-radius: 6px;
-  background: #263149; color: #d6def0; font-size: 11px;
+  background: var(--ui-border-subtle); color: var(--ui-text-strong); font-size: 11px;
 }
 .config-toolbar button { height: auto; padding: 5px 8px; line-height: 1.25; overflow-wrap: anywhere; white-space: normal; cursor: pointer; }
-.config-toolbar button:hover { border-color: #7169dc; background: #343d68; color: #fff; }
+.config-toolbar button:hover { border-color: var(--ui-accent-strong); background: var(--ui-accent-soft); color: #fff; }
 .config-toolbar select { grid-column: 1 / -1; height: auto; padding: 6px 7px; overflow: hidden; text-overflow: ellipsis; }
-.config-toolbar select:disabled { color: #68738a; background: #1b2130; }
+.config-toolbar select:disabled { color: var(--ui-text-faint); background: var(--ui-surface); }
-.config-message { margin: -4px 0 9px; color: #83b9a2; font-size: 10px; }
+.config-message { margin: -4px 0 9px; color: var(--ui-text-body); font-size: 10px; }
-.config-message.error { color: #e8959e; }
+.config-message.error { color: var(--ui-text-body); }
-.project-library { margin-top: 4px; padding: 9px; border: 1px solid #2f3b52; border-radius: 7px; background: #111725; }
+.project-library { margin-top: 4px; padding: 9px; border: 1px solid var(--ui-border-strong); border-radius: 7px; background: var(--ui-surface); }
-.project-library-title { margin-bottom: 6px; color: #cbd5e8; font-size: 11px; font-weight: 700; }
+.project-library-title { margin-bottom: 6px; color: var(--ui-text-body); font-size: 11px; font-weight: 700; }
 .project-list { display: flex; flex-direction: column; max-height: 190px; overflow-y: auto; }
 .project-row {
-  display: flex; min-height: 32px; align-items: center; gap: 8px; border-top: 1px solid #222d40;
+  display: flex; min-height: 32px; align-items: center; gap: 8px; border-top: 1px solid var(--ui-surface);
   padding: 0 9px; cursor: pointer; outline: none; user-select: none;
 }
 .project-row:first-child { border-top: 0; }
-.project-row:hover { background: #182033; }
+.project-row:hover { background: var(--ui-surface); }
-.project-row.selected { background: #25264b; box-shadow: inset 2px 0 #8179ff; }
+.project-row.selected { background: var(--ui-accent-soft-bg); box-shadow: inset 2px 0 var(--ui-accent-bright); }
-.project-row:focus-visible { box-shadow: inset 0 0 0 1px #8179ff; }
+.project-row:focus-visible { box-shadow: inset 0 0 0 1px var(--ui-accent-bright); }
-.project-name { min-width: 0; flex: 1; overflow: hidden; color: #c7d2e5; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
+.project-name { min-width: 0; flex: 1; overflow: hidden; color: var(--ui-text-body); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
-.project-size { flex: 0 0 62px; color: #7f8aa6; font-size: 10px; text-align: center; font-variant-numeric: tabular-nums; white-space: nowrap; }
+.project-size { flex: 0 0 62px; color: var(--ui-text-faint); font-size: 10px; text-align: center; font-variant-numeric: tabular-nums; white-space: nowrap; }
 .project-actions { display: flex; flex: 0 0 auto; gap: 6px; }
 .project-actions button {
   display: inline-flex; height: 24px; align-items: center; padding: 0 7px; box-sizing: border-box;
-  border: 1px solid #3b4864; border-radius: 5px; background: #1b2332; color: #9eabd3; font-size: 10px; cursor: pointer;
+  border: 1px solid var(--ui-border-strong); border-radius: 5px; background: var(--ui-surface); color: var(--ui-text-body); font-size: 10px; cursor: pointer;
 }
-.project-actions button:hover { border-color: #7169dc; background: #29324b; color: #fff; }
+.project-actions button:hover { border-color: var(--ui-accent-strong); background: var(--ui-surface); color: #fff; }
-.project-actions button:first-child:hover { border-color: #8c5462; background: #35222b; color: #ef9da9; }
+.project-actions button:first-child:hover { border-color: var(--ui-text-body); background: var(--ui-surface-muted); color: #ef9da9; }
-.project-empty { padding: 9px 2px; color: #68758d; font-size: 10px; text-align: center; }
+.project-empty { padding: 9px 2px; color: var(--ui-text-faint); font-size: 10px; text-align: center; }
 .project-bulk-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 8px; }
 .project-bulk-actions button {
-  width: 100%; min-height: 34px; padding: 5px 6px; border: 1px solid #4d4264; border-radius: 7px;
+  width: 100%; min-height: 34px; padding: 5px 6px; border: 1px solid var(--ui-accent-soft); border-radius: 7px;
-  background: #241c31; color: #e4d9f2; font-size: 11px; font-weight: 700; cursor: pointer;
+  background: var(--ui-accent-soft); color: var(--ui-accent-text-soft); font-size: 11px; font-weight: 700; cursor: pointer;
 }
-.project-bulk-actions button:hover:not(:disabled) { border-color: #8a6fbd; background: #35264a; }
+.project-bulk-actions button:hover:not(:disabled) { border-color: var(--ui-accent-strong); background: var(--ui-accent-soft); }
 .project-bulk-actions button:disabled { opacity: .5; cursor: not-allowed; }
 .project-save-backdrop {
   position: fixed; z-index: 3000; inset: 0; display: grid; place-items: center;
-  background: rgba(5, 8, 15, .72); backdrop-filter: blur(3px);
+  background: var(--ui-backdrop); backdrop-filter: blur(3px);
 }
 .project-save-dialog {
-  width: min(380px, calc(100vw - 32px)); padding: 15px; border: 1px solid #465273; border-radius: 10px;
+  width: min(380px, calc(100vw - 32px)); padding: 15px; border: 1px solid var(--ui-border-strong); border-radius: 10px;
-  background: #171d2b; color: #d8e0ef; box-shadow: 0 20px 60px rgba(0,0,0,.55);
+  background: var(--ui-surface); color: var(--ui-text-strong); box-shadow: 0 20px 60px rgba(0,0,0,.55);
 }
 .project-save-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 13px; font-size: 14px; font-weight: 700; }
-.project-save-head button { width: 24px; height: 24px; border: 1px solid #3b4864; border-radius: 5px; background: #252f43; color: #bfc9dc; cursor: pointer; }
+.project-save-head button { width: 24px; height: 24px; border: 1px solid var(--ui-border-strong); border-radius: 5px; background: var(--ui-surface-raised); color: var(--ui-text-body); cursor: pointer; }
-.project-save-dialog label { display: flex; flex-direction: column; gap: 6px; color: #8f9cb8; font-size: 11px; }
+.project-save-dialog label { display: flex; flex-direction: column; gap: 6px; color: var(--ui-text-secondary); font-size: 11px; }
 .project-save-dialog .inp {
   width: 100%; height: 34px; box-sizing: border-box; padding: 0 8px;
-  border: 1px solid #2e2e44; border-radius: 5px; outline: none;
+  border: 1px solid var(--ui-border-control); border-radius: 5px; outline: none;
-  background: #1a1a28; color: #dde; font: inherit; font-size: 12px;
+  background: var(--ui-control-bg); color: var(--ui-text-strong); font: inherit; font-size: 12px;
 }
-.project-save-dialog .inp:focus { border-color: #716eff; }
+.project-save-dialog .inp:focus { border-color: var(--ui-accent-strong); }
-.project-save-existing { margin-top: 13px; padding: 8px; border: 1px solid #2c3850; border-radius: 7px; background: #111725; }
+.project-save-existing { margin-top: 13px; padding: 8px; border: 1px solid var(--ui-border-strong); border-radius: 7px; background: var(--ui-surface); }
-.project-save-existing-title { margin-bottom: 6px; color: #aeb9cf; font-size: 11px; font-weight: 700; }
+.project-save-existing-title { margin-bottom: 6px; color: var(--ui-text-body); font-size: 11px; font-weight: 700; }
 .project-save-existing-list {
   display: grid; gap: 2px; max-height: 164px; overflow-y: auto;
-  scrollbar-width: thin; scrollbar-color: #3a455e transparent;
+  scrollbar-width: thin; scrollbar-color: var(--ui-scrollbar) transparent;
 }
 .project-save-existing-list::-webkit-scrollbar { width: 6px; }
-.project-save-existing-list::-webkit-scrollbar-thumb { border-radius: 3px; background: #3a455e; }
+.project-save-existing-list::-webkit-scrollbar-thumb { border-radius: 3px; background: var(--ui-scrollbar); }
 .project-save-existing-row {
   display: flex; width: 100%; min-height: 30px; align-items: center; gap: 8px; padding: 0 8px;
-  border: 0; border-radius: 5px; background: transparent; color: #c7d2e5; font: inherit; font-size: 11px; text-align: left; cursor: pointer;
+  border: 0; border-radius: 5px; background: transparent; color: var(--ui-text-body); font: inherit; font-size: 11px; text-align: left; cursor: pointer;
 }
-.project-save-existing-row:hover { background: #1d273a; color: #fff; }
+.project-save-existing-row:hover { background: var(--ui-surface); color: #fff; }
-.project-save-existing-row.selected { background: #25264b; color: #fff; box-shadow: inset 2px 0 #8179ff; }
+.project-save-existing-row.selected { background: var(--ui-accent-soft-bg); color: #fff; box-shadow: inset 2px 0 var(--ui-accent-bright); }
-.project-save-existing-row:focus-visible { outline: 1px solid #8179ff; outline-offset: -1px; }
+.project-save-existing-row:focus-visible { outline: 1px solid var(--ui-accent-bright); outline-offset: -1px; }
 .project-save-existing-row span { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.project-save-existing-row small { flex: 0 0 auto; color: #7f8aa6; font-size: 9px; }
+.project-save-existing-row small { flex: 0 0 auto; color: var(--ui-text-faint); font-size: 9px; }
-.project-save-existing-empty { padding: 5px 2px; color: #68758d; font-size: 10px; text-align: center; }
+.project-save-existing-empty { padding: 5px 2px; color: var(--ui-text-faint); font-size: 10px; text-align: center; }
-.project-save-error { margin-top: 8px; color: #ef9aa7; font-size: 10px; line-height: 1.4; }
+.project-save-error { margin-top: 8px; color: var(--ui-text-body); font-size: 10px; line-height: 1.4; }
 .project-save-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
-.project-save-actions button { height: 31px; padding: 0 14px; border: 1px solid #3d4b66; border-radius: 6px; background: #27334a; color: #cbd5e7; cursor: pointer; }
+.project-save-actions button { height: 31px; padding: 0 14px; border: 1px solid var(--ui-border-strong); border-radius: 6px; background: var(--ui-control-hover); color: var(--ui-text-body); cursor: pointer; }
-.project-save-actions button.primary { border-color: #625ff1; background: #514dcc; color: #fff; }
+.project-save-actions button.primary { border-color: var(--ui-accent); background: var(--ui-accent-button); color: #fff; }
 .project-save-actions button:disabled { opacity: .5; cursor: not-allowed; }
-.group { border: 1px solid #2a2a3c; border-radius: 8px; margin-bottom: 10px; overflow: hidden; }
+.group { border: 1px solid var(--ui-border); border-radius: 8px; margin-bottom: 10px; overflow: hidden; }
 .group-head {
   display: flex; align-items: center; gap: 6px; padding: 7px 10px; cursor: pointer;
-  font-size: 12px; font-weight: 600; color: #ccd; background: #191924; user-select: none;
+  font-size: 12px; font-weight: 600; color: var(--ui-text-soft); background: var(--ui-surface-muted); user-select: none;
 }
-.group-head:hover { background: #20202e; }
+.group-head:hover { background: var(--ui-hover-surface); }
 .group-body { padding: 8px 10px 12px; }
-.caret { display: inline-block; width: 12px; color: #667; font-size: 11px; }
+.caret { display: inline-block; width: 12px; color: var(--ui-text-muted); font-size: 11px; }
 </style>

src/views/particle-panel/SceneObjectsSection.vue

@@ -359,56 +359,56 @@ const displaySystems = computed<DisplaySystem[]>(() => {
 <style scoped>
 .scene-context-menu {
   position: fixed; z-index: 10000; min-width: 142px; padding: 4px;
-  border: 1px solid #3d4962; border-radius: 7px; background: #171d2a;
+  border: 1px solid var(--ui-border-strong); border-radius: 7px; background: var(--ui-surface);
   box-shadow: 0 10px 28px rgba(0, 0, 0, .48);
 }
 .scene-context-menu button {
   display: block; width: 100%; height: 30px; padding: 0 10px; border: 0; border-radius: 5px;
-  background: transparent; color: #d5dced; font: inherit; font-size: 12px; text-align: left; cursor: pointer;
+  background: transparent; color: var(--ui-text-strong); font: inherit; font-size: 12px; text-align: left; cursor: pointer;
 }
 .scene-context-menu button:hover, .scene-context-menu button:focus-visible {
-  outline: none; background: #2d3953; color: #fff;
+  outline: none; background: var(--ui-control-hover); color: #fff;
 }
-.panel { display: flex; width: 100%; height: 100%; flex-direction: column; overflow: hidden; background: #14141f; border-left: 1px solid #2a2a3c; padding: 12px; box-sizing: border-box; }
+.panel { display: flex; width: 100%; height: 100%; flex-direction: column; overflow: hidden; background: var(--ui-panel-bg); border-left: 1px solid var(--ui-border); padding: 12px; box-sizing: border-box; }
-.empty, .panel-hint { color: #667; font-size: 12px; padding: 8px 0; }
+.empty, .panel-hint { color: var(--ui-text-muted); font-size: 12px; padding: 8px 0; }
-.group { border: 1px solid #2a2a3c; border-radius: 8px; margin-bottom: 10px; overflow: hidden; }
+.group { border: 1px solid var(--ui-border); border-radius: 8px; margin-bottom: 10px; overflow: hidden; }
 .group-head {
   display: flex; align-items: center; gap: 6px; padding: 7px 10px; cursor: pointer;
-  font-size: 12px; font-weight: 600; color: #ccd; background: #191924; user-select: none;
+  font-size: 12px; font-weight: 600; color: var(--ui-text-soft); background: var(--ui-surface-muted); user-select: none;
 }
-.group-head:hover { background: #20202e; }
+.group-head:hover { background: var(--ui-hover-surface); }
 .scene-head { padding-right: 6px; }
 .scene-actions { margin-left: auto; display: flex; align-items: center; gap: 4px; }
 .scene-add {
-  height: 24px; padding: 0 6px; border: 1px solid #3a4a6a; border-radius: 5px;
+  height: 24px; padding: 0 6px; border: 1px solid var(--ui-border-strong); border-radius: 5px;
-  background: #2e3a55; color: #cdf; font-size: 10px; white-space: nowrap; cursor: pointer;
+  background: var(--ui-border-strong); color: var(--ui-accent-text-muted); font-size: 10px; white-space: nowrap; cursor: pointer;
 }
-.scene-add:hover { border-color: #7774ff; background: #45426f; color: #fff; }
+.scene-add:hover { border-color: var(--ui-accent-strong); background: var(--ui-accent-soft); color: #fff; }
-.scene-add:disabled { opacity: 0.42; cursor: not-allowed; border-color: #343a4b; background: #252a38; color: #778095; }
+.scene-add:disabled { opacity: 0.42; cursor: not-allowed; border-color: var(--ui-border-control); background: var(--ui-surface); color: var(--ui-text-faint); }
 .group-body { padding: 8px 10px 12px; }
-.caret { display: inline-block; width: 12px; color: #667; font-size: 11px; }
+.caret { display: inline-block; width: 12px; color: var(--ui-text-muted); font-size: 11px; }
 .tree { margin-bottom: 8px; }
-.tree-item { display: flex; align-items: center; gap: 6px; padding: 5px 6px; font-size: 12px; color: #bcd; border-radius: 6px; margin-bottom: 2px; }
+.tree-item { display: flex; align-items: center; gap: 6px; padding: 5px 6px; font-size: 12px; color: var(--ui-accent-text-muted); border-radius: 6px; margin-bottom: 2px; }
-.tree-item.on { background: #26324a; color: #ffe; }
+.tree-item.on { background: var(--ui-surface-raised); color: var(--ui-text-strong); }
 .tree-item .tdot { color: #ffcc33; font-size: 10px; }
-.tree-item .tdot.dim { color: #556; }
+.tree-item .tdot.dim { color: var(--ui-text-faint); }
 .tree-item .tdot.collision-dot { color: #ff7070; }
 .tree-item .tdot.path-dot { color: #ff933e; font-size: 14px; }
 .tree-item .tdot.spine-dot { color: #c08cff; font-size: 11px; }
-.tree-item .sub-branch { color: #5f7090; font-size: 12px; }
+.tree-item .sub-branch { color: var(--ui-text-faint); font-size: 12px; }
 .tree-item .tlabel { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.scene-tree { padding-bottom: 8px; border-bottom: 1px solid #2a2a3c; }
+.scene-tree { padding-bottom: 8px; border-bottom: 1px solid var(--ui-border); }
 .scene-object-item { min-height: 28px; cursor: pointer; }
-.scene-object-item:hover { background: #202b40; }
+.scene-object-item:hover { background: var(--ui-surface-raised); }
-.scene-object-child { background: rgba(30, 42, 62, .35); }
+.scene-object-child { background: var(--ui-hover-translucent); }
-.scene-object-kind { color: #75829c; font-size: 10px; }
+.scene-object-kind { color: var(--ui-text-faint); font-size: 10px; }
-.scene-object-kind.sub-emitter-kind { color: #8f8cff; }
+.scene-object-kind.sub-emitter-kind { color: var(--ui-accent-text-soft); }
 .scene-object-eye {
   width: 24px; height: 22px; padding: 3px; flex: 0 0 24px; border: 1px solid transparent; border-radius: 5px;
-  background: transparent; color: #9aa6bf; cursor: pointer;
+  background: transparent; color: var(--ui-text-body); cursor: pointer;
 }
-.scene-object-eye:hover { border-color: #4b5972; background: #29354a; color: #e1e7f4; }
+.scene-object-eye:hover { border-color: var(--ui-border-strong); background: var(--ui-control-hover); color: var(--ui-text-strong); }
-.scene-object-eye.off { color: #59647a; }
+.scene-object-eye.off { color: var(--ui-text-faint); }
 .scene-object-eye svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
 .scene-object-eye .eye-slash { stroke: #d47b88; stroke-width: 2; }
 .scene-object-delete {
@@ -416,45 +416,45 @@ const displaySystems = computed<DisplaySystem[]>(() => {
   background: #3a272f; color: #efb4bd; font-size: 11px; cursor: pointer;
 }
 .scene-object-delete:hover { border-color: #a45c69; background: #57303a; color: #fff; }
-.object-editor-title { margin: 10px 0 8px; padding-top: 8px; border-top: 1px solid #2a2a3c; color: #cbd4e8; font-weight: 700; }
+.object-editor-title { margin: 10px 0 8px; padding-top: 8px; border-top: 1px solid var(--ui-border); color: var(--ui-text-body); font-weight: 700; }
-.field-block { display: flex; flex-direction: column; gap: 5px; margin: 10px 0; color: #8f9ab3; font-size: 11px; }
+.field-block { display: flex; flex-direction: column; gap: 5px; margin: 10px 0; color: var(--ui-text-faint); font-size: 11px; }
 .field-block > .inp { width: 100%; box-sizing: border-box; min-height: 30px; }
-.field-block small { color: #5f6d86; line-height: 1.5; }
+.field-block small { color: var(--ui-text-faint); line-height: 1.5; }
 .field-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; align-items: end; }
-.compact-field { display: flex; min-width: 0; flex-direction: column; gap: 5px; margin: 5px 0; color: #8f9ab3; font-size: 11px; }
+.compact-field { display: flex; min-width: 0; flex-direction: column; gap: 5px; margin: 5px 0; color: var(--ui-text-faint); font-size: 11px; }
 .compact-field .inp { width: 100%; min-height: 30px; box-sizing: border-box; }
 .check-field { align-items: flex-start; }
-.check-field input { width: 18px; height: 18px; margin: 4px 0; accent-color: #4f7ee8; }
+.check-field input { width: 18px; height: 18px; margin: 4px 0; accent-color: var(--ui-accent-strong); }
-.follow-path, .setting-line { display: flex; align-items: center; gap: 8px; margin: 12px 0 4px; color: #aeb8cf; font-size: 12px; }
+.follow-path, .setting-line { display: flex; align-items: center; gap: 8px; margin: 12px 0 4px; color: var(--ui-text-body); font-size: 12px; }
 .setting-line { justify-content: space-between; }
-.follow-path input, .setting-line input[type='checkbox'] { width: 17px; height: 17px; accent-color: #4f7ee8; }
+.follow-path input, .setting-line input[type='checkbox'] { width: 17px; height: 17px; accent-color: var(--ui-accent-strong); }
-.collider-follow-section { margin-top: 12px; padding-top: 4px; border-top: 1px solid #30394d; }
+.collider-follow-section { margin-top: 12px; padding-top: 4px; border-top: 1px solid var(--ui-border-strong); }
-.collider-curve-title { display: flex; flex-direction: column; gap: 3px; margin: 12px 0 6px; color: #aeb8cf; font-size: 12px; }
+.collider-curve-title { display: flex; flex-direction: column; gap: 3px; margin: 12px 0 6px; color: var(--ui-text-body); font-size: 12px; }
-.collider-curve-title small { color: #67738c; font-size: 10px; line-height: 1.45; }
+.collider-curve-title small { color: var(--ui-text-faint); font-size: 10px; line-height: 1.45; }
-.path-color { width: 48px; height: 28px; padding: 0; border: 1px solid #3a4963; background: transparent; cursor: pointer; }
+.path-color { width: 48px; height: 28px; padding: 0; border: 1px solid var(--ui-border-button); background: transparent; cursor: pointer; }
-.path-help { margin: 12px 0; color: #7d89a2; font-size: 11px; line-height: 1.55; }
+.path-help { margin: 12px 0; color: var(--ui-text-faint); font-size: 11px; line-height: 1.55; }
-.path-help > span { color: #aeb8cf; }
+.path-help > span { color: var(--ui-text-body); }
 .path-help ul { margin: 6px 0 0; padding-left: 20px; }
 .path-help li { margin: 3px 0; }
-.path-action { width: 100%; height: 31px; margin-top: 7px; border: 0; border-radius: 5px; background: #33425b; color: #c9d1e1; cursor: pointer; }
+.path-action { width: 100%; height: 31px; margin-top: 7px; border: 0; border-radius: 5px; background: var(--ui-border-strong); color: var(--ui-text-body); cursor: pointer; }
 .path-action:hover { filter: brightness(1.12); }
 .path-action.primary { background: #f05408; color: #fff; }
-.row { display: flex; align-items: center; gap: 8px; margin: 6px 0; font-size: 12px; color: #aab; }
+.row { display: flex; align-items: center; gap: 8px; margin: 6px 0; font-size: 12px; color: var(--ui-text); }
-.row > span:first-child { width: 60px; flex-shrink: 0; color: #8a93bb; }
+.row > span:first-child { width: 60px; flex-shrink: 0; color: var(--ui-text-secondary); }
-.inp { flex: 1; min-width: 0; padding: 3px 5px; background: #1a1a28; border: 1px solid #2e2e44; border-radius: 5px; color: #dde; font-size: 12px; }
+.inp { flex: 1; min-width: 0; padding: 3px 5px; background: var(--ui-control-bg); border: 1px solid var(--ui-border-control); border-radius: 5px; color: var(--ui-text-strong); font-size: 12px; }
 .inp.tiny { width: 46px; flex: 0 0 46px; text-align: center; }
-.seed-row { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid #2d3950; }
+.seed-row { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--ui-border-strong); }
-.seed-row label { width: 64px; color: #8f9bb5; font-size: 12px; }
+.seed-row label { width: 64px; color: var(--ui-text-faint); font-size: 12px; }
-.seed-input { min-width: 0; flex: 1; padding: 6px 8px; border: 1px solid #344158; border-radius: 6px; outline: none; background: #0f1625; color: #e2e7f2; font-size: 12px; }
+.seed-input { min-width: 0; flex: 1; padding: 6px 8px; border: 1px solid var(--ui-border-strong); border-radius: 6px; outline: none; background: var(--ui-control-deep); color: var(--ui-text-strong); font-size: 12px; }
-.seed-input:focus { border-color: #625ff1; }
+.seed-input:focus { border-color: var(--ui-accent); }
-.seed-random { width: 34px; height: 30px; border: 1px solid #3a4860; border-radius: 6px; background: #2c3950; color: #d7def0; cursor: pointer; }
+.seed-random { width: 34px; height: 30px; border: 1px solid var(--ui-border-strong); border-radius: 6px; background: var(--ui-border-strong); color: var(--ui-text-strong); cursor: pointer; }
-.seed-random:hover { background: #394964; }
+.seed-random:hover { background: var(--ui-border-strong); }
 .scene-seed { margin-top: 10px; }
 .scene-warmup { margin-top: 10px; }
-.scene-number-unit { min-width: 0; flex: 1; display: flex; align-items: center; border: 1px solid #344158; border-radius: 6px; background: #0f1625; }
+.scene-number-unit { min-width: 0; flex: 1; display: flex; align-items: center; border: 1px solid var(--ui-border-strong); border-radius: 6px; background: var(--ui-control-deep); }
-.scene-number-unit:focus-within { border-color: #625ff1; }
+.scene-number-unit:focus-within { border-color: var(--ui-accent); }
 .scene-number-unit .seed-input { border: 0; background: transparent; }
-.scene-number-unit > span { padding-right: 8px; color: #7e8aa3; font-size: 12px; }
+.scene-number-unit > span { padding-right: 8px; color: var(--ui-text-faint); font-size: 12px; }
 .scene-number-unit.disabled { opacity: .5; }
-.seed-hint { margin: 5px 0 1px 72px; color: #657188; font-size: 9px; line-height: 1.45; }
+.seed-hint { margin: 5px 0 1px 72px; color: var(--ui-text-faint); font-size: 9px; line-height: 1.45; }
 </style>