From f4dc3abc39428d2412ab29214248afd3006e8134 Mon Sep 17 00:00:00 2001
From: kakkokari-gtyih <67428053+kakkokari-gtyih@users.noreply.github.com>
Date: Thu, 12 Dec 2024 18:01:19 +0900
Subject: [PATCH 01/10] enhance(embed): add ability to pin color mode

---
 bskyembed/snippet/embed.ts        |  1 +
 bskyembed/src/color-mode.ts       |  6 ++++
 bskyembed/src/screens/landing.tsx | 59 ++++++++++++++++++++++++++-----
 bskyembed/src/screens/post.tsx    | 15 ++++++--
 4 files changed, 70 insertions(+), 11 deletions(-)

diff --git a/bskyembed/snippet/embed.ts b/bskyembed/snippet/embed.ts
index 3c1b14b955..4a56539b3c 100644
--- a/bskyembed/snippet/embed.ts
+++ b/bskyembed/snippet/embed.ts
@@ -68,6 +68,7 @@ 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)
diff --git a/bskyembed/src/color-mode.ts b/bskyembed/src/color-mode.ts
index 2b392c6178..7cbdfd4801 100644
--- a/bskyembed/src/color-mode.ts
+++ b/bskyembed/src/color-mode.ts
@@ -1,3 +1,9 @@
+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)
diff --git a/bskyembed/src/screens/landing.tsx b/bskyembed/src/screens/landing.tsx
index a3448e90ac..82e8c9d394 100644
--- a/bskyembed/src/screens/landing.tsx
+++ b/bskyembed/src/screens/landing.tsx
@@ -6,7 +6,11 @@ import {useEffect, useMemo, useRef, useState} from 'preact/hooks'
 
 import arrowBottom from '../../assets/arrowBottom_stroke2_corner0_rounded.svg'
 import logo from '../../assets/logo.svg'
-import {initColorMode} from '../color-mode'
+import {
+  assertColorModeValues,
+  ColorModeValues,
+  initColorMode,
+} from '../color-mode'
 import {Container} from '../components/container'
 import {Link} from '../components/link'
 import {Post} from '../components/post'
@@ -32,6 +36,7 @@ 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>(
@@ -128,16 +133,44 @@ 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="w-full max-w-[600px]">
+        <div className={`${colorMode} w-full max-w-[600px]`}>
           <Skeleton />
         </div>
       ) : (
         <div className="w-full max-w-[600px] gap-8 flex flex-col">
-          {!error && thread && uri && <Snippet thread={thread} />}
-          {!error && thread && <Post thread={thread} key={thread.post.uri} />}
+          {!error && thread && uri && (
+            <Snippet thread={thread} colorMode={colorMode} />
+          )}
+          <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>
@@ -168,7 +201,13 @@ function Skeleton() {
   )
 }
 
-function Snippet({thread}: {thread: AppBskyFeedDefs.ThreadViewPost}) {
+function Snippet({
+  thread,
+  colorMode,
+}: {
+  thread: AppBskyFeedDefs.ThreadViewPost
+  colorMode: ColorModeValues
+}) {
   const ref = useRef<HTMLInputElement>(null)
   const [copied, setCopied] = useState(false)
 
@@ -204,9 +243,11 @@ function Snippet({thread}: {thread: AppBskyFeedDefs.ThreadViewPost}) {
     // 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(thread.post.cid)}"><p lang="${escapeHtml(
-      lang,
-    )}">${escapeHtml(record.text)}${
+    )}" data-bluesky-cid="${escapeHtml(
+      thread.post.cid,
+    )}" data-bluesky-embed-color-mode="${escapeHtml(
+      colorMode,
+    )}"><p lang="${escapeHtml(lang)}">${escapeHtml(record.text)}${
       record.embed
         ? `<br><br><a href="${escapeHtml(href)}">[image or embed]</a>`
         : ''
@@ -217,7 +258,7 @@ function Snippet({thread}: {thread: AppBskyFeedDefs.ThreadViewPost}) {
     )}</a>) <a href="${escapeHtml(href)}">${escapeHtml(
       niceDate(thread.post.indexedAt),
     )}</a></blockquote><script async src="${EMBED_SCRIPT}" charset="utf-8"></script>`
-  }, [thread])
+  }, [thread, colorMode])
 
   return (
     <div className="flex gap-2 w-full">
diff --git a/bskyembed/src/screens/post.tsx b/bskyembed/src/screens/post.tsx
index 1764442b73..5eacc3e632 100644
--- a/bskyembed/src/screens/post.tsx
+++ b/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 {initColorMode} from '../color-mode'
+import {applyTheme, assertColorModeValues, initColorMode} from '../color-mode'
 import {Container} from '../components/container'
 import {Link} from '../components/link'
 import {Post} from '../components/post'
@@ -22,7 +22,18 @@ if (!uri) {
   throw new Error('No uri in path')
 }
 
-initColorMode()
+const query = new URLSearchParams(window.location.search)
+const colorMode = query.get('colorMode')
+
+if (
+  colorMode != null &&
+  assertColorModeValues(colorMode) &&
+  colorMode !== 'auto'
+) {
+  applyTheme(colorMode)
+} else {
+  initColorMode()
+}
 
 agent
   .getPostThread({

From c2b30f6e2ee8163f0c93e75f59933e9520b95ebe Mon Sep 17 00:00:00 2001
From: kakkokari-gtyih <67428053+kakkokari-gtyih@users.noreply.github.com>
Date: Fri, 13 Dec 2024 09:02:11 +0900
Subject: [PATCH 02/10] fix: Move color mode dropdown to the root section

---
 bskyembed/src/screens/landing.tsx | 58 +++++++++++++++----------------
 1 file changed, 29 insertions(+), 29 deletions(-)

diff --git a/bskyembed/src/screens/landing.tsx b/bskyembed/src/screens/landing.tsx
index 82e8c9d394..c58ceae30f 100644
--- a/bskyembed/src/screens/landing.tsx
+++ b/bskyembed/src/screens/landing.tsx
@@ -125,37 +125,37 @@ function LandingPage() {
 
       <h1 className="text-4xl font-bold text-center">Embed a Bluesky Post</h1>
 
-      <input
-        type="text"
-        value={uri}
-        onInput={e => setUri(e.currentTarget.value)}
-        className="border rounded-lg py-3 w-full max-w-[600px] px-4 dark:bg-dimmedBg dark:border-slate-500"
-        placeholder={DEFAULT_POST}
-      />
+      <div className="flex flex-col w-full max-w-[600px] gap-4">
+        <input
+          type="text"
+          value={uri}
+          onInput={e => setUri(e.currentTarget.value)}
+          className="border rounded-lg py-3  px-4 dark:bg-dimmedBg dark:border-slate-500"
+          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>
+          <label
+            className="block pb-1 text-sm font-medium"
+            for="colorModeSelect">
+            Theme
+          </label>
+          <select
+            value={colorMode}
+            onChange={e => {
+              const value = e.currentTarget.value
+              if (assertColorModeValues(value)) {
+                setColorMode(value)
+              }
+            }}
+            id="colorModeSelect"
+            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>
-      </details>
+      </div>
 
       <img src={arrowBottom} className="w-6 dark:invert" />
 

From 81011d9d94e620e9cc8af68831466181af006163 Mon Sep 17 00:00:00 2001
From: kakkokari-gtyih <67428053+kakkokari-gtyih@users.noreply.github.com>
Date: Fri, 13 Dec 2024 09:41:34 +0900
Subject: [PATCH 03/10] auto -> system

---
 bskyembed/snippet/embed.ts        | 2 +-
 bskyembed/src/color-mode.ts       | 4 ++--
 bskyembed/src/screens/landing.tsx | 4 ++--
 bskyembed/src/screens/post.tsx    | 2 +-
 4 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/bskyembed/snippet/embed.ts b/bskyembed/snippet/embed.ts
index 4a56539b3c..7de7af1fec 100644
--- a/bskyembed/snippet/embed.ts
+++ b/bskyembed/snippet/embed.ts
@@ -68,7 +68,7 @@ function scan(node = document) {
     if (ref_url.startsWith('http')) {
       searchParams.set('ref_url', encodeURIComponent(ref_url))
     }
-    searchParams.set('colorMode', embed.dataset.blueskyColorMode || 'auto')
+    searchParams.set('colorMode', embed.dataset.blueskyColorMode || 'system')
 
     const iframe = document.createElement('iframe')
     iframe.setAttribute('data-bluesky-id', id)
diff --git a/bskyembed/src/color-mode.ts b/bskyembed/src/color-mode.ts
index 7cbdfd4801..fcca48a072 100644
--- a/bskyembed/src/color-mode.ts
+++ b/bskyembed/src/color-mode.ts
@@ -1,7 +1,7 @@
-export type ColorModeValues = 'auto' | 'light' | 'dark'
+export type ColorModeValues = 'system' | 'light' | 'dark'
 
 export function assertColorModeValues(value: string): value is ColorModeValues {
-  return ['auto', 'light', 'dark'].includes(value)
+  return ['system', 'light', 'dark'].includes(value)
 }
 
 export function applyTheme(theme: 'light' | 'dark') {
diff --git a/bskyembed/src/screens/landing.tsx b/bskyembed/src/screens/landing.tsx
index c58ceae30f..d53ec66934 100644
--- a/bskyembed/src/screens/landing.tsx
+++ b/bskyembed/src/screens/landing.tsx
@@ -36,7 +36,7 @@ render(<LandingPage />, root)
 
 function LandingPage() {
   const [uri, setUri] = useState('')
-  const [colorMode, setColorMode] = useState<ColorModeValues>('auto')
+  const [colorMode, setColorMode] = useState<ColorModeValues>('system')
   const [error, setError] = useState<string | null>(null)
   const [loading, setLoading] = useState(false)
   const [thread, setThread] = useState<AppBskyFeedDefs.ThreadViewPost | null>(
@@ -150,7 +150,7 @@ function LandingPage() {
             }}
             id="colorModeSelect"
             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="system">System</option>
             <option value="light">Light</option>
             <option value="dark">Dark</option>
           </select>
diff --git a/bskyembed/src/screens/post.tsx b/bskyembed/src/screens/post.tsx
index 5eacc3e632..2d837deaee 100644
--- a/bskyembed/src/screens/post.tsx
+++ b/bskyembed/src/screens/post.tsx
@@ -28,7 +28,7 @@ const colorMode = query.get('colorMode')
 if (
   colorMode != null &&
   assertColorModeValues(colorMode) &&
-  colorMode !== 'auto'
+  colorMode !== 'system'
 ) {
   applyTheme(colorMode)
 } else {

From d1fed1b5d5cfaa36cf05193be8ae9f329f18c073 Mon Sep 17 00:00:00 2001
From: Samuel Newman <mozzius@protonmail.com>
Date: Thu, 19 Dec 2024 16:43:22 +0000
Subject: [PATCH 04/10] style tweaks

---
 bskyembed/src/screens/landing.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/bskyembed/src/screens/landing.tsx b/bskyembed/src/screens/landing.tsx
index d53ec66934..6f6c65eb97 100644
--- a/bskyembed/src/screens/landing.tsx
+++ b/bskyembed/src/screens/landing.tsx
@@ -1,6 +1,6 @@
 import '../index.css'
 
-import {AppBskyFeedDefs, AppBskyFeedPost, AtUri, BskyAgent} from '@atproto/api'
+import {AppBskyFeedDefs, AppBskyFeedPost, AtpAgent, AtUri} from '@atproto/api'
 import {h, render} from 'preact'
 import {useEffect, useMemo, useRef, useState} from 'preact/hooks'
 
@@ -28,7 +28,7 @@ if (!root) throw new Error('No root element')
 
 initColorMode()
 
-const agent = new BskyAgent({
+const agent = new AtpAgent({
   service: 'https://public.api.bsky.app',
 })
 
@@ -130,13 +130,13 @@ function LandingPage() {
           type="text"
           value={uri}
           onInput={e => setUri(e.currentTarget.value)}
-          className="border rounded-lg py-3  px-4 dark:bg-dimmedBg dark:border-slate-500"
+          className="border rounded-lg py-3 px-4 dark:bg-dimmedBg dark:border-slate-500"
           placeholder={DEFAULT_POST}
         />
 
         <div>
           <label
-            className="block pb-1 text-sm font-medium"
+            className="block pb-1.5 text-sm font-medium"
             for="colorModeSelect">
             Theme
           </label>
@@ -149,7 +149,7 @@ function LandingPage() {
               }
             }}
             id="colorModeSelect"
-            className="block border w-full rounded-lg text-sm px-3 py-2 dark:bg-dimmedBg dark:border-slate-500">
+            className="bg-white block border w-full rounded-lg text-sm px-3 py-2 dark:bg-dimmedBg dark:border-slate-500">
             <option value="system">System</option>
             <option value="light">Light</option>
             <option value="dark">Dark</option>

From e76be6811cda58714bb0d195289a97965de7de38 Mon Sep 17 00:00:00 2001
From: Samuel Newman <mozzius@protonmail.com>
Date: Thu, 19 Dec 2024 16:43:39 +0000
Subject: [PATCH 05/10] default to light theme

---
 bskyembed/src/screens/post.tsx | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/bskyembed/src/screens/post.tsx b/bskyembed/src/screens/post.tsx
index 2d837deaee..cea698b869 100644
--- a/bskyembed/src/screens/post.tsx
+++ b/bskyembed/src/screens/post.tsx
@@ -23,13 +23,11 @@ if (!uri) {
 }
 
 const query = new URLSearchParams(window.location.search)
-const colorMode = query.get('colorMode')
 
-if (
-  colorMode != null &&
-  assertColorModeValues(colorMode) &&
-  colorMode !== 'system'
-) {
+// theme - default to light mode
+const colorMode = query.get('colorMode') ?? 'light'
+
+if (assertColorModeValues(colorMode) && colorMode !== 'system') {
   applyTheme(colorMode)
 } else {
   initColorMode()

From ec660f5e5f177e75f067ee2cbce6123a967a5407 Mon Sep 17 00:00:00 2001
From: Samuel Newman <mozzius@protonmail.com>
Date: Thu, 19 Dec 2024 16:47:25 +0000
Subject: [PATCH 06/10] try and fix eslint

---
 .eslintrc.js        | 1 +
 bskyembed/.eslintrc | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index 8f8383bcc7..f18f5745eb 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -107,6 +107,7 @@ module.exports = {
     'bskyweb',
     '*.html',
     'bskyweb',
+    'bskyembed',
     'src/locale/locales/_build/',
     'src/locale/locales/**/*.js',
   ],
diff --git a/bskyembed/.eslintrc b/bskyembed/.eslintrc
index 2b290d5815..c21e1ec518 100644
--- a/bskyembed/.eslintrc
+++ b/bskyembed/.eslintrc
@@ -16,6 +16,6 @@
   "parserOptions": {
     "sourceType": "module",
     "ecmaVersion": "latest",
-    "project": "./bskyembed/tsconfig.json"
+    "project": "./tsconfig.json"
   }
 }

From 45336d39ab77c488f45a1db24cc2c35551f12f5a Mon Sep 17 00:00:00 2001
From: Samuel Newman <mozzius@protonmail.com>
Date: Thu, 19 Dec 2024 17:06:30 +0000
Subject: [PATCH 07/10] fix dropdown styles on other browsers

---
 .eslintrc.js                      |  2 +-
 bskyembed/.eslintrc               |  2 +-
 bskyembed/src/index.css           | 11 +++++++++++
 bskyembed/src/screens/landing.tsx | 10 ++++------
 4 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index f18f5745eb..6cf3cdbcc4 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -104,7 +104,6 @@ module.exports = {
     '*.lock',
     '.husky',
     'patches',
-    'bskyweb',
     '*.html',
     'bskyweb',
     'bskyembed',
@@ -117,5 +116,6 @@ module.exports = {
   parserOptions: {
     sourceType: 'module',
     ecmaVersion: 'latest',
+    projectSerivce: true,
   },
 }
diff --git a/bskyembed/.eslintrc b/bskyembed/.eslintrc
index c21e1ec518..2b290d5815 100644
--- a/bskyembed/.eslintrc
+++ b/bskyembed/.eslintrc
@@ -16,6 +16,6 @@
   "parserOptions": {
     "sourceType": "module",
     "ecmaVersion": "latest",
-    "project": "./tsconfig.json"
+    "project": "./bskyembed/tsconfig.json"
   }
 }
diff --git a/bskyembed/src/index.css b/bskyembed/src/index.css
index 289e34cf00..efd9f4a4e7 100644
--- a/bskyembed/src/index.css
+++ b/bskyembed/src/index.css
@@ -9,3 +9,14 @@
 :root {
   color-scheme: light dark;
 }
+
+select {
+  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' height='14px' width='14px' fill='none' viewBox='0 0 24 24'><path fill='black' fill-rule='evenodd' d='M3.293 8.293a1 1 0 0 1 1.414 0L12 15.586l7.293-7.293a1 1 0 1 1 1.414 1.414l-8 8a1 1 0 0 1-1.414 0l-8-8a1 1 0 0 1 0-1.414Z' clip-rule='evenodd'/></svg>");
+  background-repeat: no-repeat;
+  background-position: calc(100% - 0.75rem) center;
+  padding-right: 2rem;
+
+  @media (prefers-color-scheme: dark) {
+    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' height='14px' width='14px' fill='none' viewBox='0 0 24 24'><path fill='white' fill-rule='evenodd' d='M3.293 8.293a1 1 0 0 1 1.414 0L12 15.586l7.293-7.293a1 1 0 1 1 1.414 1.414l-8 8a1 1 0 0 1-1.414 0l-8-8a1 1 0 0 1 0-1.414Z' clip-rule='evenodd'/></svg>");
+  }
+}
diff --git a/bskyembed/src/screens/landing.tsx b/bskyembed/src/screens/landing.tsx
index 6f6c65eb97..b2b6625275 100644
--- a/bskyembed/src/screens/landing.tsx
+++ b/bskyembed/src/screens/landing.tsx
@@ -125,7 +125,7 @@ function LandingPage() {
 
       <h1 className="text-4xl font-bold text-center">Embed a Bluesky Post</h1>
 
-      <div className="flex flex-col w-full max-w-[600px] gap-4">
+      <div className="flex flex-col w-full max-w-[600px] gap-6">
         <input
           type="text"
           value={uri}
@@ -134,10 +134,8 @@ function LandingPage() {
           placeholder={DEFAULT_POST}
         />
 
-        <div>
-          <label
-            className="block pb-1.5 text-sm font-medium"
-            for="colorModeSelect">
+        <div className="flex flex-col gap-1.5">
+          <label className="text-sm font-medium" for="colorModeSelect">
             Theme
           </label>
           <select
@@ -149,7 +147,7 @@ function LandingPage() {
               }
             }}
             id="colorModeSelect"
-            className="bg-white block border w-full rounded-lg text-sm px-3 py-2 dark:bg-dimmedBg dark:border-slate-500">
+            className="appearance-none bg-white border w-full rounded-lg text-sm px-3 py-2 dark:bg-dimmedBg dark:border-slate-500">
             <option value="system">System</option>
             <option value="light">Light</option>
             <option value="dark">Dark</option>

From df5f3a5cba539fce52aa0e55fb6e4a678dfbbc77 Mon Sep 17 00:00:00 2001
From: Samuel Newman <mozzius@protonmail.com>
Date: Thu, 19 Dec 2024 17:06:56 +0000
Subject: [PATCH 08/10] rm unnecessary eslintrc change

---
 .eslintrc.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index 6cf3cdbcc4..1f2a8749a8 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -116,6 +116,5 @@ module.exports = {
   parserOptions: {
     sourceType: 'module',
     ecmaVersion: 'latest',
-    projectSerivce: true,
   },
 }

From e018d9f1a4ad4d4c9f58abdd39650af32c1deb76 Mon Sep 17 00:00:00 2001
From: Samuel Newman <mozzius@protonmail.com>
Date: Thu, 19 Dec 2024 17:40:31 +0000
Subject: [PATCH 09/10] more explicit color mode select

---
 bskyembed/src/color-mode.ts       |  2 +-
 bskyembed/src/screens/landing.tsx |  4 ++--
 bskyembed/src/screens/post.tsx    | 18 ++++++++++++------
 3 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/bskyembed/src/color-mode.ts b/bskyembed/src/color-mode.ts
index fcca48a072..b34624e312 100644
--- a/bskyembed/src/color-mode.ts
+++ b/bskyembed/src/color-mode.ts
@@ -9,7 +9,7 @@ export function applyTheme(theme: 'light' | 'dark') {
   document.documentElement.classList.add(theme)
 }
 
-export function initColorMode() {
+export function initSystemColorMode() {
   applyTheme(
     window.matchMedia('(prefers-color-scheme: dark)').matches
       ? 'dark'
diff --git a/bskyembed/src/screens/landing.tsx b/bskyembed/src/screens/landing.tsx
index b2b6625275..880b713372 100644
--- a/bskyembed/src/screens/landing.tsx
+++ b/bskyembed/src/screens/landing.tsx
@@ -9,7 +9,7 @@ import logo from '../../assets/logo.svg'
 import {
   assertColorModeValues,
   ColorModeValues,
-  initColorMode,
+  initSystemColorMode,
 } from '../color-mode'
 import {Container} from '../components/container'
 import {Link} from '../components/link'
@@ -26,7 +26,7 @@ export const EMBED_SCRIPT = `${EMBED_SERVICE}/static/embed.js`
 const root = document.getElementById('app')
 if (!root) throw new Error('No root element')
 
-initColorMode()
+initSystemColorMode()
 
 const agent = new AtpAgent({
   service: 'https://public.api.bsky.app',
diff --git a/bskyembed/src/screens/post.tsx b/bskyembed/src/screens/post.tsx
index cea698b869..e1ef3090bd 100644
--- a/bskyembed/src/screens/post.tsx
+++ b/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 {applyTheme, initSystemColorMode} from '../color-mode'
 import {Container} from '../components/container'
 import {Link} from '../components/link'
 import {Post} from '../components/post'
@@ -25,12 +25,18 @@ if (!uri) {
 const query = new URLSearchParams(window.location.search)
 
 // theme - default to light mode
-const colorMode = query.get('colorMode') ?? 'light'
+const colorMode = query.get('colorMode')
 
-if (assertColorModeValues(colorMode) && colorMode !== 'system') {
-  applyTheme(colorMode)
-} else {
-  initColorMode()
+switch (colorMode) {
+  case 'dark':
+    applyTheme('dark')
+    break
+  case 'system':
+    initSystemColorMode()
+    break
+  default:
+    applyTheme('light')
+    break
 }
 
 agent

From 423865a68bfd0ae1225540709ae82b640cec0c47 Mon Sep 17 00:00:00 2001
From: Samuel Newman <mozzius@protonmail.com>
Date: Thu, 19 Dec 2024 23:23:54 +0000
Subject: [PATCH 10/10] make light explicit

---
 bskyembed/src/screens/post.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/bskyembed/src/screens/post.tsx b/bskyembed/src/screens/post.tsx
index e1ef3090bd..4cd72b69bc 100644
--- a/bskyembed/src/screens/post.tsx
+++ b/bskyembed/src/screens/post.tsx
@@ -34,6 +34,7 @@ switch (colorMode) {
   case 'system':
     initSystemColorMode()
     break
+  case 'light':
   default:
     applyTheme('light')
     break