界面风格

src/views/Stage.vue

@@ -97,11 +97,39 @@ 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'
+if (!['deep-blue', 'gray-white', 'light', 'dark'].includes(store.settings.uiTheme)) store.settings.uiTheme = 'deep-blue'
+if (store.settings.canvasColorMode !== 'custom' && store.settings.canvasColorMode !== 'theme') store.settings.canvasColorMode = 'theme'
+if (!/^#[0-9a-f]{6}$/i.test(store.settings.canvasBackgroundColor || '')) store.settings.canvasBackgroundColor = '#0e1219'
+if (!/^#[0-9a-f]{6}$/i.test(store.settings.canvasGridColor || '')) store.settings.canvasGridColor = '#141a26'
 
 const CANVAS_THEMES: Record<UiTheme, { background: number; grid: number }> = {
   'deep-blue': { background: 0x0e1219, grid: 0x141a26 },
   'gray-white': { background: 0x4b4d51, grid: 0x55585d },
+  light: { background: 0xdfe4e8, grid: 0xccd4da },
+  dark: { background: 0x202326, grid: 0x282c2f },
+}
+
+function canvasPalette() {
+  if (store.settings.canvasColorMode === 'custom') {
+    return {
+      background: Number.parseInt(store.settings.canvasBackgroundColor.slice(1), 16),
+      grid: Number.parseInt(store.settings.canvasGridColor.slice(1), 16),
+    }
+  }
+  return CANVAS_THEMES[store.settings.uiTheme]
+}
+
+const colorNumberToHex = (color: number) => `#${color.toString(16).padStart(6, '0')}`
+let previousCanvasColorMode = store.settings.canvasColorMode
+
+function updateCanvasTheme() {
+  if (store.settings.canvasColorMode === 'custom' && previousCanvasColorMode === 'theme') {
+    const themeColors = CANVAS_THEMES[store.settings.uiTheme]
+    store.settings.canvasBackgroundColor = colorNumberToHex(themeColors.background)
+    store.settings.canvasGridColor = colorNumberToHex(themeColors.grid)
+  }
+  previousCanvasColorMode = store.settings.canvasColorMode
+  applyCanvasTheme()
 }
 
 let app: Application | null = null
@@ -151,7 +179,7 @@ function createLayers() {
   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.tint = canvasPalette().grid
   canvasGrid.visible = store.settings.showGrid
   app!.stage.addChild(canvasGrid)
   world = new Container()
@@ -202,7 +230,7 @@ function onPanDown(e: PointerEvent) {
 }
 
 function applyCanvasTheme() {
-  const palette = CANVAS_THEMES[store.settings.uiTheme]
+  const palette = canvasPalette()
   if (app) app.renderer.background.color = palette.background
   if (canvasGrid) canvasGrid.tint = palette.grid
 }
@@ -631,7 +659,7 @@ onMounted(async () => {
   app = new Application({
     width: el.clientWidth || 800,
     height: el.clientHeight || 600,
-    backgroundColor: CANVAS_THEMES[store.settings.uiTheme].background,
+    backgroundColor: canvasPalette().background,
     backgroundAlpha: 1,
     antialias: true,
   })
@@ -655,7 +683,12 @@ onMounted(async () => {
   watch(() => store.settings.showGrid, (visible) => {
     if (canvasGrid) canvasGrid.visible = visible
   })
-  watch(() => store.settings.uiTheme, applyCanvasTheme)
+  watch(() => [
+    store.settings.uiTheme,
+    store.settings.canvasColorMode,
+    store.settings.canvasBackgroundColor,
+    store.settings.canvasGridColor,
+  ], updateCanvasTheme)
   const textures = await loadDefaultTextures()
   dotTex = textures.dotTex
   trailTex = textures.trailTex