Tweak background color for image mat

src/App.svelte

@@ -232,7 +232,7 @@
     <Modal onEscape={$modal.noEscape ? null : closeModal}>
       {#if $modal.type === 'note/detail'}
         {#key $modal.note.id}
-        <NoteDetail {...$modal} />
+        <NoteDetail {...$modal} invertColors />
         {/key}
       {:else if $modal.type === 'note/create'}
         <NoteCreate pubkey={$modal.pubkey} />

src/partials/Preview.svelte

@@ -46,7 +46,8 @@
   <Anchor
     external
     href={url}
-    class="relative rounded border border-solid border-medium flex flex-col bg-medium overflow-hidden">
+    style="background-color: rgba(15, 15, 14, 0.5)"
+    class="relative rounded border border-solid border-medium flex flex-col overflow-hidden">
     {#if preview.image}
     <img alt="Link preview" src={preview.image} class="object-center max-h-96 object-contain" />
     {/if}

src/views/notes/NoteDetail.svelte

@@ -14,6 +14,7 @@
 
   export let note
   export let relays = []
+  export let invertColors = false
 
   let found = false
   let loading = true
@@ -56,7 +57,7 @@
 </div>
 {:else if note.pubkey}
 <div in:fly={{y: 20}} class="flex flex-col gap-4 p-4">
-  <Note showContext depth={6} anchorId={note.id} note={asDisplayEvent(note)} />
+  <Note showContext depth={6} anchorId={note.id} note={asDisplayEvent(note)} {invertColors} />
 </div>
 {/if}