fix: adapt colors correctly

tldraw/apps/tldraw-logseq/src/components/inputs/ColorInput.tsx

@@ -4,12 +4,31 @@ interface ColorInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
   label: string
 }
 
-export function ColorInput({ label, ...rest }: ColorInputProps) {
+export function ColorInput({ label, value, ...rest }: ColorInputProps) {
+  const ref = React.useRef<HTMLDivElement>(null)
+  const [computedValue, setComputedValue] = React.useState(value)
+
+  // TODO: listen to theme change?
+  React.useEffect(() => {
+    if (value?.toString().startsWith('var') && ref.current) {
+      const varName = /var\((.*)\)/.exec(value.toString())?.[1]
+      if (varName) {
+        setComputedValue(getComputedStyle(ref.current).getPropertyValue(varName).trim())
+      }
+    }
+  }, [value])
+
   return (
-    <div className="input">
+    <div className="input" ref={ref}>
       <label htmlFor={`color-${label}`}>{label}</label>
       <div className="color-input-wrapper">
-        <input className="color-input" name={`color-${label}`} type="color" {...rest} />
+        <input
+          className="color-input"
+          name={`color-${label}`}
+          type="color"
+          value={computedValue}
+          {...rest}
+        />
       </div>
     </div>
   )

tldraw/apps/tldraw-logseq/src/lib/shapes/LogseqPortalShape.tsx

@@ -227,6 +227,10 @@ export class LogseqPortalShape extends TLBoxShape<LogseqPortalShapeProps> {
                     ? '0px 0px 0 var(--tl-binding-distance) var(--tl-binding)'
                     : 'var(--shadow-large)',
                 opacity: isSelected ? 0.8 : 1,
+                color: stroke,
+                // @ts-expect-error ???
+                '--ls-primary-background-color': fill,
+                '--ls-primary-text-color': stroke,
               }}
             >
               <div className="tl-logseq-portal-header">