remove the customization part

bskyembed/snippet/embed.ts

@@ -68,7 +68,6 @@ function scan(node = document) {
     if (ref_url.startsWith('http')) {
       searchParams.set('ref_url', encodeURIComponent(ref_url))
     }
-    searchParams.set('colorMode', embed.dataset.blueskyColorMode || 'auto')
 
     const iframe = document.createElement('iframe')
     iframe.setAttribute('data-bluesky-id', id)

bskyembed/src/color-mode.ts

@@ -1,9 +1,3 @@
-export type ColorModeValues = 'auto' | 'light' | 'dark'
-
-export function assertColorModeValues(value: string): value is ColorModeValues {
-  return ['auto', 'light', 'dark'].includes(value)
-}
-
 export function applyTheme(theme: 'light' | 'dark') {
   document.documentElement.classList.remove('light', 'dark')
   document.documentElement.classList.add(theme)

bskyembed/src/screens/landing.tsx

@@ -6,11 +6,7 @@ import {useEffect, useMemo, useRef, useState} from 'preact/hooks'
 
 import arrowBottom from '../../assets/arrowBottom_stroke2_corner0_rounded.svg'
 import logo from '../../assets/logo.svg'
-import {
+import {initColorMode} from '../color-mode'
-  assertColorModeValues,
-  ColorModeValues,
-  initColorMode,
-} from '../color-mode'
 import {Container} from '../components/container'
 import {Link} from '../components/link'
 import {Post} from '../components/post'
@@ -36,7 +32,6 @@ render(<LandingPage />, root)
 
 function LandingPage() {
   const [uri, setUri] = useState('')
-  const [colorMode, setColorMode] = useState<ColorModeValues>('auto')
   const [error, setError] = useState<string | null>(null)
   const [loading, setLoading] = useState(false)
   const [thread, setThread] = useState<AppBskyFeedDefs.ThreadViewPost | null>(
@@ -133,44 +128,16 @@ function LandingPage() {
         placeholder={DEFAULT_POST}
       />
 
-      <details className="group/options overflow-clip border rounded-lg dark:border-slate-500 w-full max-w-[600px] flex flex-col">
-        <summary className="px-4 py-2 cursor-pointer group-open/options:bg-neutral-100 dark:group-open/options:bg-dimmedBgLighten">
-          Want to customize more?
-        </summary>
-        <div className="p-4 space-y-2">
-          <div>
-            <label className="block pb-1 text-sm font-medium">Color mode</label>
-            <select
-              value={colorMode}
-              onChange={e => {
-                const value = e.currentTarget.value
-                if (assertColorModeValues(value)) {
-                  setColorMode(value)
-                }
-              }}
-              className="block border w-full rounded-lg text-sm px-3 py-2 dark:bg-dimmedBg dark:border-slate-500">
-              <option value="auto">Auto (Sync with device)</option>
-              <option value="light">Light</option>
-              <option value="dark">Dark</option>
-            </select>
-          </div>
-        </div>
-      </details>
-
       <img src={arrowBottom} className="w-6 dark:invert" />
 
       {loading ? (
-        <div className={`${colorMode} w-full max-w-[600px]`}>
+        <div className="w-full max-w-[600px]">
           <Skeleton />
         </div>
       ) : (
         <div className="w-full max-w-[600px] gap-8 flex flex-col">
-          {!error && thread && uri && (
+          {!error && thread && uri && <Snippet thread={thread} />}
-            <Snippet thread={thread} colorMode={colorMode} />
+          {!error && thread && <Post thread={thread} key={thread.post.uri} />}
-          )}
-          <div className={colorMode}>
-            {!error && thread && <Post thread={thread} key={thread.post.uri} />}
-          </div>
           {error && (
             <div className="w-full border border-red-500 bg-red-500/10 px-4 py-3 rounded-lg">
               <p className="text-red-500 text-center">{error}</p>
@@ -201,13 +168,7 @@ function Skeleton() {
   )
 }
 
-function Snippet({
+function Snippet({thread}: {thread: AppBskyFeedDefs.ThreadViewPost}) {
-  thread,
-  colorMode,
-}: {
-  thread: AppBskyFeedDefs.ThreadViewPost
-  colorMode: ColorModeValues
-}) {
   const ref = useRef<HTMLInputElement>(null)
   const [copied, setCopied] = useState(false)
 
@@ -243,11 +204,9 @@ function Snippet({
     // x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x
     return `<blockquote class="bluesky-embed" data-bluesky-uri="${escapeHtml(
       thread.post.uri,
-    )}" data-bluesky-cid="${escapeHtml(
+    )}" data-bluesky-cid="${escapeHtml(thread.post.cid)}"><p lang="${escapeHtml(
-      thread.post.cid,
+      lang,
-    )}" data-bluesky-embed-color-mode="${escapeHtml(
+    )}">${escapeHtml(record.text)}${
-      colorMode,
-    )}"><p lang="${escapeHtml(lang)}">${escapeHtml(record.text)}${
       record.embed
         ? `<br><br><a href="${escapeHtml(href)}">[image or embed]</a>`
         : ''
@@ -258,7 +217,7 @@ function Snippet({
     )}</a>) <a href="${escapeHtml(href)}">${escapeHtml(
       niceDate(thread.post.indexedAt),
     )}</a></blockquote><script async src="${EMBED_SCRIPT}" charset="utf-8"></script>`
-  }, [thread, colorMode])
+  }, [thread])
 
   return (
     <div className="flex gap-2 w-full">

bskyembed/src/screens/post.tsx

@@ -4,7 +4,7 @@ import {AppBskyFeedDefs, AtpAgent} from '@atproto/api'
 import {h, render} from 'preact'
 
 import logo from '../../assets/logo.svg'
-import {applyTheme, assertColorModeValues, initColorMode} from '../color-mode'
+import {initColorMode} from '../color-mode'
 import {Container} from '../components/container'
 import {Link} from '../components/link'
 import {Post} from '../components/post'
@@ -22,18 +22,7 @@ if (!uri) {
   throw new Error('No uri in path')
 }
 
-const query = new URLSearchParams(window.location.search)
+initColorMode()
-const colorMode = query.get('colorMode')
-
-if (
-  colorMode != null &&
-  assertColorModeValues(colorMode) &&
-  colorMode !== 'auto'
-) {
-  applyTheme(colorMode)
-} else {
-  initColorMode()
-}
 
 agent
   .getPostThread({