diff --git a/tldraw/apps/tldraw-logseq/src/components/ContextBar/contextBarActionFactory.tsx b/tldraw/apps/tldraw-logseq/src/components/ContextBar/contextBarActionFactory.tsx
index f8e52bb05c..97ce2d3993 100644
--- a/tldraw/apps/tldraw-logseq/src/components/ContextBar/contextBarActionFactory.tsx
+++ b/tldraw/apps/tldraw-logseq/src/components/ContextBar/contextBarActionFactory.tsx
@@ -48,7 +48,7 @@ const contextBarActionMapping = new Map<ContextBarActionType, React.FC>()
 
 type ShapeType = Shape['props']['type']
 
-const shapeMapping: Partial<Record<ShapeType, ContextBarActionType[]>> = {
+export const shapeMapping: Partial<Record<ShapeType, ContextBarActionType[]>> = {
   'logseq-portal': ['Edit', 'LogseqPortalViewMode', 'ScaleLevel', 'OpenPage', 'AutoResizing'],
   youtube: ['YoutubeLink'],
   box: ['Swatch', 'NoFill', 'StrokeType'],
@@ -61,9 +61,9 @@ const shapeMapping: Partial<Record<ShapeType, ContextBarActionType[]>> = {
   html: ['ScaleLevel', 'AutoResizing'],
 }
 
-export const noStrokeShapes = Object.entries(shapeMapping)
+export const withFillShapes = Object.entries(shapeMapping)
   .filter(([key, types]) => {
-    return !types.includes('NoFill') && types.includes('Swatch')
+    return types.includes('NoFill') && types.includes('Swatch')
   })
   .map(([key]) => key) as ShapeType[]
 
@@ -302,7 +302,7 @@ const SwatchAction = observer(() => {
     let latestValue = ''
     const handler: React.ChangeEventHandler<HTMLInputElement> = e => {
       shapes.forEach(s => {
-        s.update({ fill: latestValue })
+        s.update({ fill: latestValue, stroke: latestValue })
       })
       app.persist(true)
     }
diff --git a/tldraw/apps/tldraw-logseq/src/lib/color.ts b/tldraw/apps/tldraw-logseq/src/lib/color.ts
new file mode 100644
index 0000000000..fffb440c2f
--- /dev/null
+++ b/tldraw/apps/tldraw-logseq/src/lib/color.ts
@@ -0,0 +1,25 @@
+let melm: any
+
+function getMeasurementDiv() {
+  // A div used for measurement
+  document.getElementById('__colorMeasure')?.remove()
+
+  const div = document.createElement('div')
+  div.id = '__colorMeasure'
+  div.tabIndex = -1
+
+  document.body.appendChild(div)
+  return div
+}
+
+export function getComputedColor(color: string) {
+  if (color?.toString().startsWith('var')) {
+    const varName = /var\((.*)\)/.exec(color.toString())?.[1]
+    if (varName) {
+      const [v, d] = varName.split(',').map(s => s.trim())
+      return getComputedStyle(getMeasurementDiv()).getPropertyValue(v).trim() ?? d ?? '#000'
+    }
+  }
+
+  return color
+}
diff --git a/tldraw/apps/tldraw-logseq/src/lib/shapes/BoxShape.tsx b/tldraw/apps/tldraw-logseq/src/lib/shapes/BoxShape.tsx
index dc67ba9a62..fef5dabbc6 100644
--- a/tldraw/apps/tldraw-logseq/src/lib/shapes/BoxShape.tsx
+++ b/tldraw/apps/tldraw-logseq/src/lib/shapes/BoxShape.tsx
@@ -21,7 +21,7 @@ export class BoxShape extends TLBoxShape<BoxShapeProps> {
     size: [100, 100],
     borderRadius: 2,
     stroke: '#000000',
-    fill: '#ffffff',
+    fill: 'var(--ls-secondary-background-color)',
     noFill: false,
     strokeType: 'line',
     strokeWidth: 2,
diff --git a/tldraw/apps/tldraw-logseq/src/lib/shapes/DotShape.tsx b/tldraw/apps/tldraw-logseq/src/lib/shapes/DotShape.tsx
index 8315d33cf7..54d2e0a1a3 100644
--- a/tldraw/apps/tldraw-logseq/src/lib/shapes/DotShape.tsx
+++ b/tldraw/apps/tldraw-logseq/src/lib/shapes/DotShape.tsx
@@ -18,7 +18,7 @@ export class DotShape extends TLDotShape<DotShapeProps> {
     point: [0, 0],
     radius: 4,
     stroke: '#000000',
-    fill: '#ffffff',
+    fill: 'var(--ls-secondary-background-color)',
     noFill: false,
     strokeType: 'line',
     strokeWidth: 2,
diff --git a/tldraw/apps/tldraw-logseq/src/lib/shapes/EllipseShape.tsx b/tldraw/apps/tldraw-logseq/src/lib/shapes/EllipseShape.tsx
index c5d36c058c..218bbb5e7a 100644
--- a/tldraw/apps/tldraw-logseq/src/lib/shapes/EllipseShape.tsx
+++ b/tldraw/apps/tldraw-logseq/src/lib/shapes/EllipseShape.tsx
@@ -20,7 +20,7 @@ export class EllipseShape extends TLEllipseShape<EllipseShapeProps> {
     point: [0, 0],
     size: [100, 100],
     stroke: '#000000',
-    fill: '#ffffff',
+    fill: 'var(--ls-secondary-background-color)',
     noFill: false,
     strokeType: 'line',
     strokeWidth: 2,
diff --git a/tldraw/apps/tldraw-logseq/src/lib/shapes/LineShape.tsx b/tldraw/apps/tldraw-logseq/src/lib/shapes/LineShape.tsx
index f8beca6aff..ce40903002 100644
--- a/tldraw/apps/tldraw-logseq/src/lib/shapes/LineShape.tsx
+++ b/tldraw/apps/tldraw-logseq/src/lib/shapes/LineShape.tsx
@@ -31,7 +31,7 @@ export class LineShape extends TLLineShape<LineShapeProps> {
       end: { id: 'end', canBind: true, point: [1, 1] },
     },
     stroke: 'var(--ls-primary-text-color, #000)',
-    fill: '#ffffff',
+    fill: 'var(--ls-secondary-background-color)',
     noFill: true,
     strokeType: 'line',
     strokeWidth: 1,
diff --git a/tldraw/apps/tldraw-logseq/src/lib/shapes/PolygonShape.tsx b/tldraw/apps/tldraw-logseq/src/lib/shapes/PolygonShape.tsx
index 6eb5f8df41..c351531291 100644
--- a/tldraw/apps/tldraw-logseq/src/lib/shapes/PolygonShape.tsx
+++ b/tldraw/apps/tldraw-logseq/src/lib/shapes/PolygonShape.tsx
@@ -22,7 +22,7 @@ export class PolygonShape extends TLPolygonShape<PolygonShapeProps> {
     ratio: 1,
     isFlippedY: false,
     stroke: '#000000',
-    fill: '#ffffff',
+    fill: 'var(--ls-secondary-background-color)',
     noFill: false,
     strokeType: 'line',
     strokeWidth: 2,
diff --git a/tldraw/apps/tldraw-logseq/src/lib/shapes/style-props.tsx b/tldraw/apps/tldraw-logseq/src/lib/shapes/style-props.tsx
index 2e29260bee..4aa074351d 100644
--- a/tldraw/apps/tldraw-logseq/src/lib/shapes/style-props.tsx
+++ b/tldraw/apps/tldraw-logseq/src/lib/shapes/style-props.tsx
@@ -1,6 +1,7 @@
 import { darken } from 'polished'
-import { noStrokeShapes } from '~components/ContextBar/contextBarActionFactory'
+import { withFillShapes } from '~components/ContextBar/contextBarActionFactory'
 import type { Shape } from '~lib'
+import { getComputedColor } from '~lib/color'
 
 export interface CustomStyleProps {
   stroke: string
@@ -15,11 +16,11 @@ export function withClampedStyles<P>(self: Shape, props: P & Partial<CustomStyle
   if (props.strokeWidth !== undefined) props.strokeWidth = Math.max(props.strokeWidth, 1)
   if (props.opacity !== undefined) props.opacity = Math.min(1, Math.max(props.opacity, 0))
 
-  const fill = props.fill ?? (self.props as any).fill
-  if (fill !== undefined) {
-    const strokeOnly = noStrokeShapes.includes(self.props.type)
+  let fill = props.fill ?? (self.props as any).fill
+  if (fill !== undefined && !props.noFill && withFillShapes.includes(self.props.type)) {
+    fill = getComputedColor(fill)
     const strokeColor = darken(0.3, fill)
-    props.stroke = strokeOnly ? fill : strokeColor
+    props.stroke = strokeColor
   }
 
   return props