@elixpo/lixsketch 5.5.0 → 5.5.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elixpo/lixsketch",
-  "version": "5.5.0",
+  "version": "5.5.1",
   "description": "Open-source SVG whiteboard engine + React canvas component with hand-drawn aesthetics — the core of LixSketch",
   "type": "module",
   "main": "src/index.js",

package/src/react/components/AppMenu.jsx

@@ -8,15 +8,22 @@ import { triggerCloudSync } from '../hooks/inertStores'
 import { triggerDocCloudSync, persistLayoutMode } from '../hooks/inertStores'
 import { useTranslation } from '../hooks/useTranslation'
 
-// Issue #38 bug #1: light-themed canvas background palette to pair with
-// the new light default theme.
-const CANVAS_BACKGROUNDS = [
+// Issue #38 follow-up: theme-paired swatches. The menu picks the
+// matching list at render time based on the active theme.
+const CANVAS_BACKGROUNDS_LIGHT = [
   { color: '#ffffff', label: 'menu.canvasBg.white' },
   { color: '#faf9f5', label: 'menu.canvasBg.cream' },
   { color: '#f5f3ed', label: 'menu.canvasBg.paper' },
   { color: '#f0f5fb', label: 'menu.canvasBg.skyTint' },
   { color: '#f0f5ef', label: 'menu.canvasBg.sageTint' },
 ]
+const CANVAS_BACKGROUNDS_DARK = [
+  { color: '#000000', label: 'menu.canvasBg.black' },
+  { color: '#161718', label: 'menu.canvasBg.darkGray' },
+  { color: '#13171C', label: 'menu.canvasBg.blueBlack' },
+  { color: '#181605', label: 'menu.canvasBg.darkYellow' },
+  { color: '#1B1615', label: 'menu.canvasBg.darkBrown' },
+]
 
 export default function AppMenu() {
   const { t, language } = useTranslation()
@@ -454,7 +461,7 @@ export default function AppMenu() {
             {t('menu.canvasBackground')}
           </p>
           <div className="flex items-center gap-1.5">
-            {CANVAS_BACKGROUNDS.map((bg) => (
+            {(theme === 'dark' ? CANVAS_BACKGROUNDS_DARK : CANVAS_BACKGROUNDS_LIGHT).map((bg) => (
               <button
                 key={bg.color}
                 onClick={() => setCanvasBackground(bg.color)}