From 56f9bd3f5e403f46289f8d70f6b7016c70086faa Mon Sep 17 00:00:00 2001
From: Jared Pereira <jared@awarm.space>
Date: Thu, 9 Apr 2026 15:53:54 -0400
Subject: [PATCH] add colors and lexicon for embed ctx

---
 .../[publication]/[rkey]/PostContent.tsx      | 16 +++++++++++++++-
 components/Blocks/EmbedBlock.tsx              | 18 ++++++++++++++++--
 components/Pages/IframePageView.tsx           | 18 ++++++++++++++++--
 lexicons/api/index.ts                         |  2 ++
 lexicons/api/lexicons.ts                      | 17 +++++++++++++++++
 lexicons/api/types/parts/page/embed/ctx.ts    | 19 +++++++++++++++++++
 lexicons/parts/page/embed/ctx.json            | 19 +++++++++++++++++++
 lexicons/src/mentionService.ts                | 15 +++++++++++++++
 8 files changed, 119 insertions(+), 5 deletions(-)
 create mode 100644 lexicons/api/types/parts/page/embed/ctx.ts
 create mode 100644 lexicons/parts/page/embed/ctx.json

diff --git a/app/lish/[did]/[publication]/[rkey]/PostContent.tsx b/app/lish/[did]/[publication]/[rkey]/PostContent.tsx
index 12f234d8..21841e6d 100644
--- a/app/lish/[did]/[publication]/[rkey]/PostContent.tsx
+++ b/app/lish/[did]/[publication]/[rkey]/PostContent.tsx
@@ -37,6 +37,9 @@ import { blockTextSize } from "src/utils/blockTextSize";
 import { slugify } from "src/utils/slugify";
 import { PostNotAvailable } from "components/Blocks/BlueskyPostBlock/BlueskyEmbed";
 import { useIframeChannel } from "src/hooks/useIframeChannel";
+import { usePubTheme } from "components/ThemeManager/PublicationThemeProvider";
+import { colorToString } from "components/ThemeManager/useColorAttribute";
+import { useDocument } from "contexts/DocumentContext";
 import { openPage as openPageAction } from "./postPageState";
 
 export function PostContent({
@@ -457,8 +460,19 @@ function PublishedIframeBlock(props: {
     onAddBelow: () => {},
   });
 
+  let { theme } = useDocument();
+  let pubTheme = usePubTheme(theme);
   let iframeSrc = new URL(props.url);
-  iframeSrc.searchParams.set("parts.page.mode", "view");
+  iframeSrc.searchParams.set("parts.page.embed.ctx.mode", "view");
+  iframeSrc.searchParams.set(
+    "parts.page.embed.ctx.bgColor",
+    `rgb(${colorToString(pubTheme.bgPage, "rgb")})`,
+  );
+  iframeSrc.searchParams.set(
+    "parts.page.embed.ctx.primaryColor",
+    `rgb(${colorToString(pubTheme.primary, "rgb")})`,
+  );
+
 
   return (
     <iframe
diff --git a/components/Blocks/EmbedBlock.tsx b/components/Blocks/EmbedBlock.tsx
index 0d4cc1a5..9db70f54 100644
--- a/components/Blocks/EmbedBlock.tsx
+++ b/components/Blocks/EmbedBlock.tsx
@@ -23,6 +23,10 @@ import { getAspectRatio } from "src/utils/aspectRatio";
 import { useIframeChannel } from "src/hooks/useIframeChannel";
 import { scrollIntoView } from "src/utils/scrollIntoView";
 import { EmbedBlockData } from "src/partsPageChannel";
+import {
+  useColorAttribute,
+  colorToString,
+} from "components/ThemeManager/useColorAttribute";
 
 export const EmbedBlock = (props: BlockProps & { preview?: boolean }) => {
   let entity_set = useEntitySetContext();
@@ -157,12 +161,22 @@ export const EmbedBlock = (props: BlockProps & { preview?: boolean }) => {
       </label>
     );
   }
+  let bgPage = useColorAttribute(null, "theme/page-background");
+  let primary = useColorAttribute(null, "theme/primary");
   let iframeSrc = useMemo(() => {
     if (!url) return undefined;
     let src = new URL(url.data.value);
-    src.searchParams.set("parts.page.mode", "edit");
+    src.searchParams.set("parts.page.embed.ctx.mode", "edit");
+    src.searchParams.set(
+      "parts.page.embed.ctx.bgColor",
+      `rgb(${colorToString(bgPage, "rgb")})`,
+    );
+    src.searchParams.set(
+      "parts.page.embed.ctx.primaryColor",
+      `rgb(${colorToString(primary, "rgb")})`,
+    );
     return src.toString();
-  }, [url]);
+  }, [url, bgPage, primary]);
 
   if (props.preview) return null;
 
diff --git a/components/Pages/IframePageView.tsx b/components/Pages/IframePageView.tsx
index 18c8cce9..3f37d70f 100644
--- a/components/Pages/IframePageView.tsx
+++ b/components/Pages/IframePageView.tsx
@@ -2,6 +2,10 @@
 
 import React, { useMemo } from "react";
 import { useIframeChannel } from "src/hooks/useIframeChannel";
+import {
+  useColorAttribute,
+  colorToString,
+} from "components/ThemeManager/useColorAttribute";
 import { PageWrapper } from "./Page";
 
 export function IframePageView(props: {
@@ -15,11 +19,21 @@ export function IframePageView(props: {
     onAddBelow: () => {},
   });
 
+  let bgPage = useColorAttribute(null, "theme/page-background");
+  let primary = useColorAttribute(null, "theme/primary");
   let iframeSrc = useMemo(() => {
     let src = new URL(props.url);
-    src.searchParams.set("parts.page.mode", "edit");
+    src.searchParams.set("parts.page.embed.ctx.mode", "edit");
+    src.searchParams.set(
+      "parts.page.embed.ctx.bgColor",
+      `rgb(${colorToString(bgPage, "rgb")})`,
+    );
+    src.searchParams.set(
+      "parts.page.embed.ctx.primaryColor",
+      `rgb(${colorToString(primary, "rgb")})`,
+    );
     return src.toString();
-  }, [props.url]);
+  }, [props.url, bgPage, primary]);
 
   return (
     <PageWrapper
diff --git a/lexicons/api/index.ts b/lexicons/api/index.ts
index c16e0d50..79f21ed8 100644
--- a/lexicons/api/index.ts
+++ b/lexicons/api/index.ts
@@ -23,6 +23,7 @@ import * as ComAtprotoRepoListRecords from './types/com/atproto/repo/listRecords
 import * as ComAtprotoRepoPutRecord from './types/com/atproto/repo/putRecord'
 import * as ComAtprotoRepoStrongRef from './types/com/atproto/repo/strongRef'
 import * as ComAtprotoRepoUploadBlob from './types/com/atproto/repo/uploadBlob'
+import * as PartsPageEmbedCtx from './types/parts/page/embed/ctx'
 import * as PartsPageMentionConfig from './types/parts/page/mention/config'
 import * as PartsPageMentionSearch from './types/parts/page/mention/search'
 import * as PartsPageMentionService from './types/parts/page/mention/service'
@@ -74,6 +75,7 @@ export * as ComAtprotoRepoListRecords from './types/com/atproto/repo/listRecords
 export * as ComAtprotoRepoPutRecord from './types/com/atproto/repo/putRecord'
 export * as ComAtprotoRepoStrongRef from './types/com/atproto/repo/strongRef'
 export * as ComAtprotoRepoUploadBlob from './types/com/atproto/repo/uploadBlob'
+export * as PartsPageEmbedCtx from './types/parts/page/embed/ctx'
 export * as PartsPageMentionConfig from './types/parts/page/mention/config'
 export * as PartsPageMentionSearch from './types/parts/page/mention/search'
 export * as PartsPageMentionService from './types/parts/page/mention/service'
diff --git a/lexicons/api/lexicons.ts b/lexicons/api/lexicons.ts
index bfea903b..9b190910 100644
--- a/lexicons/api/lexicons.ts
+++ b/lexicons/api/lexicons.ts
@@ -1014,6 +1014,22 @@ export const schemaDict = {
       },
     },
   },
+  PartsPageEmbedCtx: {
+    lexicon: 1,
+    id: 'parts.page.embed.ctx',
+    defs: {
+      mode: {
+        type: 'string',
+        knownValues: ['edit', 'view'],
+      },
+      bgColor: {
+        type: 'string',
+      },
+      primaryColor: {
+        type: 'string',
+      },
+    },
+  },
   PartsPageMentionConfig: {
     lexicon: 1,
     id: 'parts.page.mention.config',
@@ -2792,6 +2808,7 @@ export const ids = {
   ComAtprotoRepoPutRecord: 'com.atproto.repo.putRecord',
   ComAtprotoRepoStrongRef: 'com.atproto.repo.strongRef',
   ComAtprotoRepoUploadBlob: 'com.atproto.repo.uploadBlob',
+  PartsPageEmbedCtx: 'parts.page.embed.ctx',
   PartsPageMentionConfig: 'parts.page.mention.config',
   PartsPageMentionSearch: 'parts.page.mention.search',
   PartsPageMentionService: 'parts.page.mention.service',
diff --git a/lexicons/api/types/parts/page/embed/ctx.ts b/lexicons/api/types/parts/page/embed/ctx.ts
new file mode 100644
index 00000000..458b7c96
--- /dev/null
+++ b/lexicons/api/types/parts/page/embed/ctx.ts
@@ -0,0 +1,19 @@
+/**
+ * GENERATED CODE - DO NOT MODIFY
+ */
+import { type ValidationResult, BlobRef } from '@atproto/lexicon'
+import { CID } from 'multiformats/cid'
+import { validate as _validate } from '../../../../lexicons'
+import {
+  type $Typed,
+  is$typed as _is$typed,
+  type OmitKey,
+} from '../../../../util'
+
+const is$typed = _is$typed,
+  validate = _validate
+const id = 'parts.page.embed.ctx'
+
+export type Mode = 'edit' | 'view' | (string & {})
+export type BgColor = string
+export type PrimaryColor = string
diff --git a/lexicons/parts/page/embed/ctx.json b/lexicons/parts/page/embed/ctx.json
new file mode 100644
index 00000000..5b5b32a2
--- /dev/null
+++ b/lexicons/parts/page/embed/ctx.json
@@ -0,0 +1,19 @@
+{
+  "lexicon": 1,
+  "id": "parts.page.embed.ctx",
+  "defs": {
+    "mode": {
+      "type": "string",
+      "knownValues": [
+        "edit",
+        "view"
+      ]
+    },
+    "bgColor": {
+      "type": "string"
+    },
+    "primaryColor": {
+      "type": "string"
+    }
+  }
+}
\ No newline at end of file
diff --git a/lexicons/src/mentionService.ts b/lexicons/src/mentionService.ts
index 7a7132ec..ccc4a2dd 100644
--- a/lexicons/src/mentionService.ts
+++ b/lexicons/src/mentionService.ts
@@ -1,5 +1,20 @@
 import { LexiconDoc } from "@atproto/lexicon";
 
+export const PagePartsEmbedContext: LexiconDoc = {
+  lexicon: 1,
+  id: "parts.page.embed.ctx",
+  defs: {
+    mode: {
+      type: "string",
+      knownValues: ["edit", "view"],
+    },
+    bgColor: {
+      type: "string",
+    },
+    primaryColor: { type: "string" },
+  },
+};
+
 export const PagePartsMentionService: LexiconDoc = {
   lexicon: 1,
   id: "parts.page.mention.service",
-- 
2.51.2