lunanting/lovart3
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: canvas background supports light/dark mode

Browse Source
This commit is contained in:
Your Name 2026-01-24 20:27:45 +08:00
parent 1a9f453a20
commit 253c2b7e38
1 changed files with 17 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
components/canvas/CanvasWorkspace.tsx
View File

@ -215,7 +215,7 @@ export function CanvasWorkspace() {
<div
ref={containerRef}
className={cn(
"relative w-full h-full overflow-hidden bg-[#1a1a2e]",
"relative w-full h-full overflow-hidden bg-muted/30 dark:bg-[#1a1a2e]",
tool === 'pan' && "cursor-grab",
isPanning && "cursor-grabbing"
)}
@ -226,9 +226,23 @@ export function CanvasWorkspace() {
onMouseLeave={handleMouseUp}
onWheel={handleWheel}
>
{/* 网格背景 */}
{/* 网格背景 - 支持浅色/深色模式 */}
<div
className="absolute inset-0 pointer-events-none"
className="absolute inset-0 pointer-events-none dark:opacity-100"
style={{
backgroundImage: `
linear-gradient(var(--grid-color, rgba(0,0,0,0.06)) 1px, transparent 1px),
linear-gradient(90deg, var(--grid-color, rgba(0,0,0,0.06)) 1px, transparent 1px)
`,
backgroundSize: `${20 * viewport.zoom}px ${20 * viewport.zoom}px`,
backgroundPosition: `${viewport.x}px ${viewport.y}px`,
// @ts-ignore CSS custom properties
'--grid-color': 'rgba(0,0,0,0.06)',
}}
/>
{/* 深色模式网格 */}
<div
className="absolute inset-0 pointer-events-none hidden dark:block"
style={{
backgroundImage: `
linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),