颜色主题

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;
-  background: rgba(15, 18, 27, .8); color: #aeb8cc; cursor: pointer;
+  border: 1px solid var(--ui-border-translucent); border-radius: 7px;
+  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:focus-visible { outline: 2px solid #8b86ff; outline-offset: 2px; }
+.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 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>